Bootstrap你可以在你的 AngularJS 应用中加入 Twitter Bootstrap你可以在你的 head元素中添加如下代码:link relstylesheet href//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css如果站点在国内建议使用百度静态资源库的Bootstrap代码如下link relstylesheet href//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css以下是一个完整的 HTML 实例, 使用了 AngularJS 指令和 Bootstrap 类。HTML 代码!DOCTYPE htmlhtmllink relstylesheet hrefhttp://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.cssscript srchttp://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js/scriptbody ng-appmyApp ng-controlleruserCtrldiv classcontainerh3Users/h3table classtable table-stripedtheadtrthEdit/ththFirst Name/ththLast Name/th/tr/theadtbodytr ng-repeatuser in userstdbutton classbtn ng-clickeditUser(user.id)span classglyphicon glyphicon-pencil/spannbsp;nbsp;Edit/button/tdtd{{ user.fName }}/tdtd{{ user.lName }}/td/tr/tbody/tablehrbutton classbtn btn-success ng-clickeditUser(new)span classglyphicon glyphicon-user/span Create New User/buttonhrh3 ng-showeditCreate New User:/h3h3 ng-hideeditEdit User:/h3form classform-horizontaldiv classform-grouplabel classcol-sm-2 control-labelFirst Name:/labeldiv classcol-sm-10input typetext ng-modelfName ng-disabled!edit placeholderFirst Name/div/divdiv classform-grouplabel classcol-sm-2 control-labelLast Name:/labeldiv classcol-sm-10input typetext ng-modellName ng-disabled!edit placeholderLast Name/div/divdiv classform-grouplabel classcol-sm-2 control-labelPassword:/labeldiv classcol-sm-10input typepassword ng-modelpassw1 placeholderPassword/div/divdiv classform-grouplabel classcol-sm-2 control-labelRepeat:/labeldiv classcol-sm-10input typepassword ng-modelpassw2 placeholderRepeat Password/div/div/formhrbutton classbtn btn-success ng-disablederror || incompletespan classglyphicon glyphicon-save/span Save Changes/button/divscript src myUsers.js/script/body/html尝试一下 »指令解析AngularJS 指令描述html ng-app为 html 元素定义一个应用(未命名)body ng-controller为 body 元素定义一个控制器tr ng-repeat循环 users 对象数组每个 user 对象放在 tr 元素中。button ng-click当点击 button 元素时调用函数 editUser()h3 ng-show如果 edit true 显示 h3 元素h3 ng-hide如果 edit true 隐藏 h3 元素input ng-model为应用程序绑定 input 元素button ng-disabled如果发生错误或者 incomplete true 禁用 button 元素Bootstrap 类解析元素Bootstrap 类定义divcontainer内容容器tabletable表格tabletable-striped带条纹背景的表格buttonbtn按钮buttonbtn-success成功按钮spanglyphicon字形图标spanglyphicon-pencil铅笔图标spanglyphicon-user用户图标spanglyphicon-save保存图标formform-horizontal水平表格divform-group表单组labelcontrol-label控制器标签labelcol-sm-2跨越 2 列divcol-sm-10跨越 10 列JavaScript 代码myUsers.jsangular.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验证模型变量的错误和完整性
