AngularJS Bootstrap

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

Bootstrap

你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 <head>元素中添加如下代码:

如果站点在国内，建议使用百度静态资源库的Bootstrap，代码如下：

以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 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"> //form-horizontal水平表单
                <div class="form-group"> //form-group这是获取最佳间距所必需的
                    <label class="col-sm-2 control-label">名:</label>//col-sm Bootstrap 网格系统
                    <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="js/myUser.js"></script>
    </body>
</html>

myUser.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;
        }
    };
})