Angular基础(3)
-------Angular Bootstrap
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"> 6 <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 7 </head> 8 <body ng-app="myApp" ng-controller="userCtrl"> 9 10 <div class="container"> 11 12 <h3>Users</h3> 13 14 <table class="table table-striped"> 15 <thead> 16 <tr> 17 <th>编辑</th> 18 <th>名</th> 19 <th>姓</th> 20 </tr> 21 </thead> 22 <tbody> 23 <tr ng-repeat="user in users"> 24 <td> 25 <button class="btn" ng-click="editUser(user.id)"> 26 <span class="glyphicon glyphicon-pencil"></span>编辑 27 </button> 28 </td> 29 <td>{{ user.fName }}</td> 30 <td>{{ user.lName }}</td> 31 </tr> 32 </tbody> 33 </table> 34 35 <hr> 36 <button class="btn btn-success" ng-click="editUser('new')"> 37 <span class="glyphicon glyphicon-user"></span>创建新用户 38 </button> 39 <hr> 40 41 <h3 ng-show="edit">创建新用户:</h3> 42 <h3 ng-hide="edit">编辑用户:</h3> 43 44 <form class="form-horizontal"> 45 <div class="form-group"> 46 <label class="col-sm-2 control-label">名:</label> 47 <div class="col-sm-10"> 48 <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名"> 49 </div> 50 </div> 51 <div class="form-group"> 52 <label class="col-sm-2 control-label">姓:</label> 53 <div class="col-sm-10"> 54 <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓"> 55 </div> 56 </div> 57 <div class="form-group"> 58 <label class="col-sm-2 control-label">密码:</label> 59 <div class="col-sm-10"> 60 <input type="password" ng-model="passw1" placeholder="密码"> 61 </div> 62 </div> 63 <div class="form-group"> 64 <label class="col-sm-2 control-label">重复密码:</label> 65 <div class="col-sm-10"> 66 <input type="password" ng-model="passw2" placeholder="重复密码"> 67 </div> 68 </div> 69 </form> 70 71 <hr> 72 <button class="btn btn-success" ng-disabled="error || incomplete"> 73 <span class="glyphicon glyphicon-save"></span>修改 74 </button> 75 76 </div> 77 78 <script src="myUsers.js"></script> 79 80 </body> 81 </html>
myUsers.js代码
1 angular.module('myApp', []).controller('userCtrl', function($scope) { 2 $scope.fName = ''; 3 $scope.lName = ''; 4 $scope.passw1 = ''; 5 $scope.passw2 = ''; 6 $scope.users = [ 7 {id:1, fName:'Hege', lName:"Pege" }, 8 {id:2, fName:'Kim', lName:"Pim" }, 9 {id:3, fName:'Sal', lName:"Smith" }, 10 {id:4, fName:'Jack', lName:"Jones" }, 11 {id:5, fName:'John', lName:"Doe" }, 12 {id:6, fName:'Peter',lName:"Pan" } 13 ]; 14 $scope.edit = true; 15 $scope.error = false; 16 $scope.incomplete = false; 17 18 $scope.editUser = function(id) { 19 if (id == 'new') { 20 $scope.edit = true; 21 $scope.incomplete = true; 22 $scope.fName = ''; 23 $scope.lName = ''; 24 } else { 25 $scope.edit = false; 26 $scope.fName = $scope.users[id-1].fName; 27 $scope.lName = $scope.users[id-1].lName; 28 } 29 }; 30 31 $scope.$watch('passw1',function() {$scope.test();}); 32 $scope.$watch('passw2',function() {$scope.test();}); 33 $scope.$watch('fName', function() {$scope.test();}); 34 $scope.$watch('lName', function() {$scope.test();}); 35 36 $scope.test = function() { 37 if ($scope.passw1 !== $scope.passw2) { 38 $scope.error = true; 39 } else { 40 $scope.error = false; 41 } 42 $scope.incomplete = false; 43 if ($scope.edit && (!$scope.fName.length || 44 !$scope.lName.length || 45 !$scope.passw1.length || !$scope.passw2.length)) { 46 $scope.incomplete = true; 47 } 48 }; 49 50 });