<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>綜合練習</title> <style> .addUser{ width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3; } </style> <script type="text/javascript" src="AngularJS/angular.js" ></script> <script type="text/javascript" src="AngularJS/angular-route.js" ></script> <script type="text/javascript"> var app = angular.module("myApp",["ngRoute"]); //定義路由規則 app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/addUser",{//添加用路由地址 controller:"addCtrl", templateUrl:"addUser.html" }) .when("/updatePwd/:name",{//修改密碼用路由地址 controller:"updateCtrl", templateUrl:"updatePwd.html" }) .otherwise({redirectTo:"/addUser"}); }]); app.controller("myCtrl",function($scope,$location){ $scope.users = [ {"id":1,"name":"張三","pwd":"123","age":22,"sex":"男","state":false}, {"id":2,"name":"李四","pwd":"456","age":33,"sex":"女","state":false}, {"id":3,"name":"王五","pwd":"789","age":44,"sex":"男","state":false} ]; //給按鈕添加點擊事件，根據傳過來的參數，判斷跳轉到的路由地址 $scope.goToPath = function(path){ alert(path); $location.path(path); } //全部刪除功能 $scope.deleteAll = function () { alert("確認全部刪除嗎?"); $scope.users = []; } //全選功能 $scope.checkAll = false; $scope.All = function () { //當點擊全選按鈕時,實現全選 for(var i=0;i<$scope.users.length;i++){ if($scope.checkAll){ $scope.users[i].state = true; }else{ $scope.users[i].state = false; } } } //全選功能的判斷 $scope.Acheck = function () { var flag = 0; for(var i=0;i<$scope.users.length;i++){ if($scope.users[i].state){ flag++; } } if(flag == $scope.users.length){ //實現全選按鈕選中 $scope.checkAll = true; }else{ $scope.checkAll = false; } } //批量刪除 $scope.piDelete = function () { confirm("確定批量刪除嗎?"); for(var i=0;i<$scope.users.length;i++) { if($scope.users[i].state){ $scope.users.splice(i,1); i--; } } } //判斷年齡範圍 $scope.size = "--請選擇--"; $scope.ageSize = function(age,size){ if(size == "--請選擇--"){ return true; }else{ var arr = size.split("-"); var ageMin = arr[0]; var ageMax = arr[1]; if(age>ageMin && age<ageMax){ return true; }else{ return false; } } } //判斷年性別範圍 $scope.sex1 = "--請選擇--"; $scope.sexSize = function(sex,sex1){ if(sex1 == "--請選擇--"){ return true; }else{ if($scope.sex1 == sex){ return true; }else{ return false; } } } }); //添加用戶控制器 app.controller("addCtrl",function($scope){ $scope.name = "";//雙向數據綁定，獲得頁面輸入的新用戶信息 $scope.pwd = ""; $scope.age = ""; $scope.sex = ""; $scope.sub = function(){ //遍歷數據源，拿到最大的用戶id $scope.idMax = 0; for(index in $scope.users){ if($scope.users[index].id > $scope.idMax){ $scope.idMax = $scope.users[index].id; } } //創建新用戶對象 var user = { id:$scope.idMax+1, name:$scope.name, pwd:$scope.pwd, age:$scope.age, sex:$scope.sex }; //把新獲得的用戶對象添加到數據庫數組中 $scope.users.push(user); } }); //修改密碼控制 app.controller("updateCtrl",function($scope,$routeParams){ var name = $routeParams.name;//獲得要修改的用戶的用戶名 $scope.name = name;//將要修改用戶的名字，賦值給雙向數據綁定的頁面用戶名顯示。 $scope.pwd1 = "";//雙向數據綁定用戶輸入的新密碼 //點擊修改密碼按鈕，執行修改密碼方法 $scope.updatePwd = function(){ //遍歷數據源，通過比較數據源中用戶名跟參數要修改的用戶名一致，進行密碼修改 for(index in $scope.users){ if($scope.users[index].name == name){ //獲得用戶輸入的密碼，賦值給當前用戶要修改的新密碼。 $scope.users[index].pwd = $scope.pwd1; } } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>用戶信息表</h3> <div> <input placeholder="用戶名查詢" size="10" ng-model="name"/> <!--<input ng-model="ageSize" placeholder="年齡查詢(a-b)" size="10"/>--> 年齡：<select id="age" ng-model="size"> <option>--請選擇--</option> <option>11-20</option> <option>21-30</option> <option>31-40</option> <option>41-50</option> <option>51-60</option> </select> 性別：<select ng-model="sex1"> <option>--請選擇--</option> <option>男</option> <option>女</option> </select> <input type="button" value="全部刪除" ng-click="deleteAll()"/> <input type="button" value="批量刪除" ng-click="piDelete()"/> </div><br /> <div> <table border="1" cellspacing="1" cellpadding="10"> <thead> <tr> <th><input type="checkbox" ng-model="checkAll" ng-click="All()"/> </th> <th>id</th> <th>用戶名</th> <th>密碼</th> <th>年齡</th> <th>性別</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="user in users | filter:{name:name}" ng-if="ageSize(user.age,size)" ng-show="sexSize(user.sex,sex1)"> <td><input ng-model="user.state" type="checkbox" ng-click="Acheck()"/></td> <td>{{user.id}}</td> <td>{{user.name }}</td> <td>{{user.pwd}}</td> <td>{{user.age }}</td> <td>{{user.sex}}</td> <td><button ng-click="goToPath('/updatePwd/'+user.name)">修改密碼</button> </td> </tr> </tbody> </table> </div><br /> <button class="addUser" ng-click="goToPath('/addUser')">添加用戶</button><br /><br /> <!-- 1.添加用戶頁面 --> <script type="text/ng-template" id="addUser.html"> <form action=""> <table border="1" cellspacing="1" cellpadding="10"> <tr> <th>用戶名：</th> <td><input ng-model="name" placeholder="請輸入用戶名" /></td> </tr> <tr> <th>密 碼：</th> <td><input ng-model="pwd" placeholder="請輸入密碼" /></td> </tr><tr> <th>年 齡：</th> <td><input ng-model="age" placeholder="請輸入年齡" /></td> </tr><tr> <th>性 別：</th> <td><input ng-model="sex" placeholder="請輸入性別" /></td> </tr> <tr align="center"> <td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td> </tr> </table> </form> </script> <!-- 2.修改用戶信息頁面 --> <script type="text/ng-template" id="updatePwd.html"> <form> <table border="1" cellspacing="1" cellpadding="10"> <tr> <th>用戶名：</th> <td><input disabled="disabled" ng-model="name" placeholder="請輸入用戶名" /></td> </tr> <tr> <th>舊密碼：</th> <td><input ng-model="oldPwd" placeholder="請輸入密碼" /></td> </tr><tr> <th>新密碼：</th> <td><input ng-model="pwd1" placeholder="請輸入年齡" /></td> </tr><tr> <th>確 認：</th> <td><input ng-model="pwd2" placeholder="請輸入性別" /></td> </tr> <tr align="center"> <td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td> </tr> </table> </form> </script> <!-- 6.指定相應內容 --> <div ng-view> </div> </center> </body> </html>
