angularjs路由

来源：互联网发布：wav音频分割软件编辑：程序博客网时间：2024/06/06 04:57
<!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(){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>
阅读全文
0 0