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

àì夳堔傛蜴生んèń 2022-07-15 15:24 145阅读 0赞

<img src="https://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">
                    
                    <div class="col-md-12">
                        
                        <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，效果果然不是盖的，杠杠的，上一张靓照。

![Image 1][]

[Image 1]: