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