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