[java学习4]angularJS练习2-表单练习

来源：互联网发布：淘宝店铺crm做法编辑：程序博客网时间：2024/05/29 19:50

<img src="http://img.blog.csdn.net/20161020210152760" alt="" /><!DOCTYPE html><html lang="en" ng-app="RootApp"><head>    <meta charset="UTF-8">    <script src="FrameWork/angular.js"></script>    <script src="FrameWork/angular-route.js"></script>    <script src="FrameWork/angular-animate.js"></script>    <script src="JS/App.js"></script>    <script src="JS/Controllers.js"></script>    <link rel="stylesheet" href="Css/bootstrap.css">    <link rel="stylesheet" href="Css/backColor.css">    <title>图书管理</title></head><body><div ng-view>组件区域</div><div class="panel panel-primary" style="width: 500px">    <div class="panel-heading">        <div class="panel-title">双向数据绑定</div>        <div class="panel-body  backColor-{{backcolor}}" ng-controller="formController">            <div class="row">                <!--col-md-12表示12列，md是middle的意思，中等的屏幕。-->                <div class="col-md-12">                    <!--role="form"给bootstrap使用，表示是表单-->                    <form class="form-horizontal" role="form">                        <div class="form-group">                            <label class="col-lg-2">邮箱：</label>                            <div class="col-lg-10">                                <input ng-model="userInfo.email" type="email" class="form-control"                                       placeholder="example@tom.com">                            </div>                        </div>                        <div class="form-group">                            <label class="col-lg-2">密码：</label>                            <div class="col-lg-10">                                <input ng-model="userInfo.pass" type="password" class="form-control"                                       placeholder="请输入密码">                            </div>                        </div>                        <div class="form-group">                            <div class="col-md-offset-2 col-md-10">                                <input ng-model="userInfo.autoLoad" type="checkbox">自动登录                            </div>                        </div>                        <div class="form-group">                            <div class="col-md-offset-2 col-md-10">                                <button ng-click="printUserInfo()" class="btn btn-default">打印userinfo</button>                                <button ng-click="resetUserInfo()" class="btn btn-default">重置userinfo</button>                                <button ng-click="switchColor()" class="btn btn-default">切换颜色</button>                            </div>                        </div>                    </form>                </div>            </div>        </div>    </div></div></body></html>

/** * Created by liyanq on 16/10/19. */var RootApp = angular.module("RootApp",["ngRoute","ngAnimate","bookAppController"]);RootApp.config(function ($routeProvider) {    $routeProvider.when("/hello",{        templateUrl: 'Templates/Hello.html',        controller: 'HelloController'    }).when("/list",{        templateUrl:'Templates/bookList.html',        controller:"bookListController"    }).otherwise({        // redirectTo:"/hello"    });});RootApp.controller("formController",function ($scope) {    $scope.backcolor = "red";    $scope.userInfo = {        email:"liyanq528@163.com",        pass:"12345",        autoLoad:true    };    $scope.printUserInfo = function () {        console.log($scope.userInfo);    };    $scope.resetUserInfo = function () {        $scope.userInfo = {            email:"",            pass:"",            autoLoad:false        };    };    $scope.switchColor = function () {       if ($scope.backcolor == "red"){           $scope.backcolor = "green";       }       else{           $scope.backcolor = "red";       }    };});

.backColor-red{    background-color: red;}.backColor-green{    background-color: green;}

今天是第一天接触bootstrap，效果果然不是盖的，杠杠的，上一张靓照。

0 0