1 <!doctype html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link rel="stylesheet" href="dist/css/bootstrap.css">
6 <link rel="stylesheet" href="dist/css/bootstrap-theme.css">
7 <script type="text/javascript" src="js/angular.min.js"></script>
8 <script type="text/javascript" src="js/bootstrap.js"></script>
9 </head>
10 <body ng-app="myApp" ng-controller="userCtrl">
11 <div class="container">
12 <h3>Users
</h3>
13 <table class="table table-striped">
14 <thead>
15 <tr>
16 <th>名
</th>
17 <th>姓
</th>
18 <th>操作
</th>
19 </tr>
20 </thead>
21 <tbody>
22 <tr ng-repeat="user in users">
23 <td>{{ user.fName }}
</td>
24 <td>{{ user.lName }}
</td>
25 <td><button class="btn" ng-click="editUser(user.id)"> <i class="icon-pencil"></i> 编辑
</button>
26 <button class="btn" ng-click="deleteUser(user.id)"> <i class="icon-trash"></i>删除
</button></td>
27 </tr>
28 </tbody>
29 </table>
30 <hr>
31 <button class="btn btn-success" ng-click="editUser('new')"> <span class="glyphicon glyphicon-user"></span>创建新用户
</button>
32 <hr>
33 <h3 ng-show="edit">创建新用户:
</h3>
34 <h3 ng-hide="edit">编辑用户:
</h3>
35 <form class="form-horizontal" name="myForm" novalidate>
36 <input type="hidden" ng-model="fuserid" value="" >
37 <div class="form-group">
38 <label class="col-sm-2 control-label">名:
</label>
39 <div class="col-sm-10">
40 <input type="text" ng-model="fName" name="fName" placeholder="名" required>
41 <span style="color:red" ng-show="myForm.fName.$dirty && myForm.fName.$invalid">必填。
</span>
42 </div>
43 </div>
44 <div class="form-group">
45 <label class="col-sm-2 control-label">姓:
</label>
46 <div class="col-sm-10">
47 <input type="text" ng-model="lName" name="lName" placeholder="姓" required>
48 <span style="color:red" ng-show="myForm.lName.$dirty && myForm.lName.$invalid">必填。
</span>
49 </div>
50 </div>
51 <div class="form-group" ng-show="edit">
52 <label class="col-sm-2 control-label">密码:
</label>
53 <div class="col-sm-10">
54 <input type="password" ng-model="passw1" name="passw1" placeholder="密码" required ng-disabled="!edit">
55 <span style="color:red" ng-show="myForm.passw1.$dirty && myForm.passw1.$invalid">必填。
</span>
56 </div>
57 </div>
58 <div class="form-group" ng-show="edit">
59 <label class="col-sm-2 control-label">重复密码:
</label>
60 <div class="col-sm-10">
61 <input type="password" ng-model="passw2" placeholder="重复密码" ng-disabled="!edit">
62 <span style="color:red" ng-hide="!error">两次密码输入必须一致
</span>
63 </div>
64 </div>
65 </form>
66 <hr>
67 <button class="btn btn-success" ng-click="saveUser(fuserid)" ng-disabled="error || incomplete">保存修改
</button>
68 </div>
69 <script src="js/ngjs/myUser.js"></script>
70 </body>
71 </html>
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.fuserid=$scope.users.length+1
;
15 $scope.edit =
true;
16 $scope.error =
false;
17 $scope.incomplete =
false;
18
19 $scope.editUser =
function(id) {
20 if (id == 'new'
) {
21 $scope.fuserid = $scope.users.length+1
;
22 $scope.edit =
true;
23 $scope.incomplete =
true;
24 $scope.fName = ''
;
25 $scope.lName = ''
;
26 $scope.passw1 = ''
;
27 $scope.passw2 = ''
;
28 }
else {
29 $scope.edit =
false;
//修改时 不修改密码
30 $scope.fName = $scope.users[id-1
].fName;
31 $scope.lName = $scope.users[id-1
].lName;
32 $scope.fuserid =
id;
33 $scope.passw1 = ' '
;
34 $scope.passw2 = ' '
;
35 }
36 };
37
38 $scope.saveUser =
function(id) {
39 if (id > $scope.users.length) {
//新增
40 $scope.users.push({id:$scope.fuserid,fName:$scope.fName,lName:$scope.lName});
41 $scope.fuserid += 1
;
42 }
else {
//修改
43 $scope.users[id-1].fName =
$scope.fName;
44 $scope.users[id-1].lName =
$scope.lName;
45 }
46 };
47
48 $scope.deleteUser =
function(id) {
//删除
49 $scope.users.splice($scope.users.indexOf(id), id);
50 };
51
52
53 //输入验证
54 $scope.$watch('passw1',
function() {$scope.test();});
55 $scope.$watch('passw2',
function() {$scope.test();});
56 $scope.$watch('fName',
function() {$scope.test();});
57 $scope.$watch('lName',
function() {$scope.test();});
58
59 $scope.test =
function() {
60 if ($scope.passw1 !==
$scope.passw2) {
61 $scope.error =
true;
62 }
else {
63 $scope.error =
false;
64 }
65 $scope.incomplete =
false;
66
67 if ($scope.edit && (!$scope.fName.length ||
68 !$scope.lName.length ||
69 !$scope.passw1.length || !
$scope.passw2.length)) {
70 $scope.incomplete =
true;
71 }
72 };
73
74 });
转载于:https://www.cnblogs.com/webQdesign/p/5761184.html
相关资源：JAVA上百实例源码以及开源项目
