1 <!doctype html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <script type="text/javascript" src="js/angular.min.js"></script>
6 <link rel="stylesheet" href="css/bootstrap.min.css">
7 </head>
8 <body ng-app="myApp" ng-controller="userCtrl">
9 <div class="container">
10 <h3>Users</h3>
11 <table class="table table-striped">
12 <thead>
13 <tr>
14 <th>编辑</th>
15 <th>名</th>
16 <th>姓</th>
17 <td>密码</td>
18 </tr>
19 </thead>
20 <tbody>
21 <tr ng-repeat="user in users">
22 <td><button class="btn" ng-click="editUser(user.id)"> <span class="glyphicon glyphicon-pencil"></span>编辑 </button></td>
23 <td>{{ user.fName }}</td>
24 <td>{{ user.lName }}</td>
25 </tr>
26 </tbody>
27 </table>
28 <hr>
29 <button class="btn btn-success" ng-click="editUser(‘new‘)"> <span class="glyphicon glyphicon-user"></span>创建新用户 </button>
30 <hr>
31 <h3 ng-show="edit">创建新用户:</h3>
32 <h3 ng-hide="edit">编辑用户:</h3>
33 <form class="form-horizontal">
34 <input type="hidden" ng-model="fuserid" value="" >
35 <div class="form-group">
36 <label class="col-sm-2 control-label">名:</label>
37 <div class="col-sm-10">
38 <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
39 </div>
40 </div>
41 <div class="form-group">
42 <label class="col-sm-2 control-label">姓:</label>
43 <div class="col-sm-10">
44 <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
45 </div>
46 </div>
47 <div class="form-group">
48 <label class="col-sm-2 control-label">密码:</label>
49 <div class="col-sm-10">
50 <input type="password" ng-model="passw1" placeholder="密码">
51 </div>
52 </div>
53 <div class="form-group">
54 <label class="col-sm-2 control-label">重复密码:</label>
55 <div class="col-sm-10">
56 <input type="password" ng-model="passw2" placeholder="重复密码">
57 </div>
58 </div>
59 </form>
60 <hr>
61 <button class="btn btn-success" ng-click="saveUser(fuserid)"> <span class="glyphicon glyphicon-save"></span>保存修改 </button>
62 </div>
63 <script src="js/ngjs/myUser.js"></script>
64 </body>
65 </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.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 = true;
26 $scope.fName = $scope.users[id-1].fName;
27 $scope.lName = $scope.users[id-1].lName;
28 $scope.fuserid = id;
29 }
30 };
31
32 $scope.saveUser = function(id) {
33 if (id == ‘new‘) {
34 //
35 } else {
36 $scope.users[id-1].fName = $scope.fName;
37 $scope.users[id-1].lName = $scope.lName;
38 }
39 };
40
41 $scope.$watch(‘passw1‘,function() {$scope.test();});
42 $scope.$watch(‘passw2‘,function() {$scope.test();});
43 $scope.$watch(‘fName‘, function() {$scope.test();});
44 $scope.$watch(‘lName‘, function() {$scope.test();});
45
46 $scope.test = function() {
47 if ($scope.passw1 !== $scope.passw2) {
48 $scope.error = true;
49 } else {
50 $scope.error = false;
51 }
52 $scope.incomplete = false;
53 if ($scope.edit && (!$scope.fName.length ||
54 !$scope.lName.length ||
55 !$scope.passw1.length || !$scope.passw2.length)) {
56 $scope.incomplete = true;
57 }
58 };
59
60 });
看教程显示了数据，但是点击修改的时候，按钮是禁用掉的。就想着自己试试修改数据。
学习心得：
获取对应的ID，修改id行的值。在html页面增加一个隐藏域存入ID值。
如有更好的办法可在评论区告诉我哦！^_^
时间： 2024-08-20 22:16:06