AngularJS 之 Bootstrap

AngularJS 的首选样式表是 Twitter Bootstrap， Twitter Bootstrap 是目前最受欢迎的前端框架。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">
    <div class="container">
        <h3>Users</h3>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>编辑</th>
                <th>名</th>
                <th>姓</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="user in users">
                <td>
                <button class="btn" ng-click="editUser(user.id)">
                    <span class="glyphicon glyphicon-pencil"></span>编辑
                </button>
                </td>
                <td>{{ user.fName }}</td>
                <td>{{ user.lName }}</td>
            </tr>
            </tbody>
        </table>

        <hr>
        <button class="btn btn-success" ng-click="editUser('new')">
            <span class="glyphicon glyphicon-user"></span>创建新用户
        </button>
        <hr>

        <h3 ng-show="edit">创建新用户:</h3>
        <h3 ng-hide="edit">编辑用户:</h3>

        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">名:</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
                </div>
            </div> 
            <div class="form-group">
                <label class="col-sm-2 control-label">姓:</label>
                <div class="col-sm-10">
                    <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">密码:</label>
                <div class="col-sm-10">
                    <input type="password" ng-model="passw1" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">重复密码:</label>
                <div class="col-sm-10">
                    <input type="password" ng-model="passw2" placeholder="重复密码">
                </div>
            </div>
        </form>

        <hr>
        <button class="btn btn-success" ng-disabled="error || incomplete">
        <span class="glyphicon glyphicon-save"></span>修改
        </button>
    </div>

    <script src="myUsers.js"></script>
</body>
</html>
myUsers.js 
angular.module('myApp', ).controller('userCtrl', function($scope) {
    $scope.fName = '';
    $scope.lName = '';
    $scope.passw1 = '';
    $scope.passw2 = '';
    $scope.users = [
        {id:1, fName:'Hege', lName:"Pege" },
        {id:2, fName:'Kim',  lName:"Pim" },
        {id:3, fName:'Sal',  lName:"Smith" },
        {id:4, fName:'Jack', lName:"Jones" },
        {id:5, fName:'John', lName:"Doe" },
        {id:6, fName:'Peter',lName:"Pan" }
    ];
    $scope.edit = true;
    $scope.error = false;
    $scope.incomplete = false; 

    $scope.editUser = function(id) {
        if (id == 'new') {
            $scope.edit = true;
            $scope.incomplete = true;
            $scope.fName = '';
            $scope.lName = '';
        } else {
            $scope.edit = false;
            $scope.fName = $scope.users[id-1].fName;
            $scope.lName = $scope.users[id-1].lName; 
        }
    };

    $scope.$watch('passw1',function() {$scope.test();});
    $scope.$watch('passw2',function() {$scope.test();});
    $scope.$watch('fName', function() {$scope.test();});
    $scope.$watch('lName', function() {$scope.test();});

    $scope.test = function() {
        if ($scope.passw1 !== $scope.passw2) {
            $scope.error = true;
        } else {
            $scope.error = false;
        }
        $scope.incomplete = false;
        if ($scope.edit && (!$scope.fName.length ||
                !$scope.lName.length ||
                !$scope.passw1.length || !$scope.passw2.length)) {
            $scope.incomplete = true;
        }
    };
});

JavaScript 代码解析

  • Scope 属性          用途
  • $scope.fName      模型变量 (用户名)
  • $scope.lName      模型变量 (用户姓)
  • $scope.passw1     模型变量 (用户密码 1)
  • $scope.passw2     模型变量 (用户密码 2)
  • $scope.users      模型变量 (用户的数组)
  • $scope.edit       当用户点击创建用户时设置为true。
  • $scope.error      如果 passw1 不等于 passw2 设置为 true
  • $scope.incomplete 如果每个字段都为空 (length = 0) 设置为 true
  • $scope.editUser   设置模型变量
  • $scope.watch      监控模型变量
  • $scope.test       验证模型变量的错误和完整性