<!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="js/angular.js" ></script> <script type="text/javascript" src="js/angular-route.js" ></script> <script type="text/javascript"> var app = angular.module("myApp",["ngRoute"]); //使用config配置路由规则 app.config(["$routeProvider",function($routeProvider){ $routeProvider .when("/addUser",{ controller:"addUserCtrl", templateUrl:"addUser.html" }) .when("/updatePwd/:name",{ controller:"updatePwdCtrl", templateUrl:"updatePwd.html" }) .otherwise({redirectTo:"/addUser"}); }]); app.controller("myCtrl",function($scope,$location){ $scope.ageSize = ""; $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.goToUrl = function(path){ alert(path); $location.path(path); } //年龄范围过滤 $scope.ageTest = function(age,ageSize){ //alert(ageSize); //alert(age); if(ageSize != "--请选择--"){ var ages = ageSize.split("-"); var ageMin = ages[0]; var ageMax = ages[1]; if( age<ageMin || age>ageMax ){ return false; }else{ return true; } }else{ return true; } } //批量删除 $scope.deleteSel = function(){ var userNames = []; //遍历users数组,获取状态是选中的user对象的名字 for(index in $scope.users){ if($scope.users[index].state == true){ userNames.push($scope.users[index].name); } } if(userNames.length>0){ if(confirm("是否删除选中项?")){ for(i in userNames){ var name = userNames[i]; for(i2 in $scope.users){ if($scope.users[i2].name == name){ $scope.users.splice(i2,1); } } } } }else{ alert("请选择删除项"); } } }); //自定义年龄控制器 app.filter("ageFilter",function(){ return function(user){ alert(user); /*if(user.age<20 || user.age>22){ return null; }else{ return user; }*/ } }); //定义添加用户控制器 app.controller("addUserCtrl",function($scope){ //alert("添加用户控制器"); $scope.name = ""; $scope.pwd = ""; $scope.pwd2 = ""; $scope.age = ""; $scope.sex = ""; $scope.sub = function(){ alert(1); var newUser = { id:$scope.users.length + 1, name:$scope.name, pwd:$scope.pwd, age:$scope.age, sex:$scope.sex } //添加新用户. $scope.users.push(newUser); } }); //定义修改用户控制器 app.controller("updatePwdCtrl",function($scope,$routeParams){ //alert("修改控制器"); $scope.name = $routeParams.name; $scope.oldPwd = ""; $scope.pwd1 = ""; $scope.pwd2 = ""; //alert($scope.name); $scope.updatePwd = function(){ //alert(pwd1); /*if($scope.pwd1 != $scope.pwd2){ alert("两次密码不一致 "); }*/ for(index in $scope.users){ //alert($scope.users[index].name); if($scope.users[index].name == $scope.name) { $scope.users[index].pwd = $scope.pwd1; } } } }); </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <h3>用户信息表</h3> <div> <input placeholder="用户名查询" size="10" /> <!--<input ng-model="ageSize" placeholder="年龄查询(a-b)" size="10"/>--> 年龄:<select id="age" ng-model="ageSize" ng-init="ageSize='--请选择--'"> <option>--请选择--</option> <option>11-20</option> <option>21-30</option> <option>31-40</option> <option>41-50</option> <option>51-60</option> </select> 性别:<select> <option>男</option> <option>女</option> </select> <input type="button" value="全部删除" /> <input ng-click="deleteSel()" type="button" value="批量删除" /> </div><br /> <div> <table border="1" cellspacing="1" cellpadding="10"> <thead> <tr> <th><input type="checkbox" /> </th> <th>id</th> <th>用户名</th> <th>密码</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> </thead> <tbody> <tr ng-repeat="user in users " ng-if="ageTest(user.age,ageSize)"> <td><input ng-model="user.state" type="checkbox"/></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="goToUrl('/updatePwd/'+user.name)">修改密码</button> </td> </tr> </tbody> </table> </div><br /> <button class="addUser" ng-click="goToUrl('/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>