【Angular】Angular基础(3)

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