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值。
如有更好的辦法可在評論區告訴我哦！^_^