js 路由 范围排序 修改数据

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="angular.js" >script>
      <script type="text/javascript" src="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" /> 
            
            年龄:<select id="age" ng-model="ageSize" ng-init="ageSize='--请选择--'">
               <option>--请选择--option>
               <option>11-20option>
               <option>21-30option>
               <option>31-40option>
               <option>41-50option>
               <option>51-60option>
            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>idth>
                     <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 />
         
         <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>
         
         <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>
         
         
         
         <div ng-view>
            
         div>
      center>
   body>
html>

你可能感兴趣的:(混合开发)