angularjs+路由实现用户列表

来源：互联网发布：怎么看自己的淘宝联盟i 编辑：程序博客网时间：2024/04/26 22:32

已有功能：查询，年龄，批量删除，修改密码，添加用户

未实现的功能：性别，全部删除

<!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="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-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 />
           
           <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>

阅读全文

1 0

angularjs+路由 实现用户列表

angularjs+路由实现用户列表