html angular+route:模糊查询+限定年龄范围+全部删除+批量删除+修改密码+添加用户

最新推荐文章于 2022-07-23 11:38:02 发布

qq_4027

最新推荐文章于 2022-07-23 11:38:02 发布

阅读量453

点赞数

分类专栏：网页

网页专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

   <head>
       <meta charset="UTF-8">
       <title>第三周模拟</title>

       <script type="text/javascript" src="js/angular.js"></script>
       <script type="text/javascript" src="js/angular-route.js"></script>

       <script>
           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.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.delectSel = function() {
                   //定义数组,保存选项进行删除
                   var arr = [];
                   //遍历数据源
                   for(index in $scope.users) {
                       if($scope.users[index].state) {
                           arr.push($scope.users[index].name)
                       }
                   }
                   //遍历含有选项name属性
                   if(arr.length > 0) {
                       for(i in arr) {
                           //对比选项中项在数组中的角标,根据角标删除对象
                           for(i2 in $scope.users) {
                               if(arr[i] == $scope.users[i2].name) {
                                   $scope.users.splice(i2, 1);
                               }
                           }
                       }
                   } else {
                       alert("请选择");
                   }
               }
               //               全部删除
               $scope.delectAll = function() {
                   if(confirm("确认全删")) {
                       $scope.users = [];
                   }
               }
               //全选方法
               $scope.selectAll = false;
               $scope.selectAllFun = function() {
                   if($scope.selectAll) {
                       //alert("afsd");
                       for(index in $scope.users) {
                           $scope.users[index].state = true;
                       }
                   } else {
                       for(index in $scope.users) {
                           $scope.users[index].state = false;
                       }
                   }
               }

               //检测是否全选
               $scope.checkSelect = function(index) {
                   var temp = 0;
                   if($scope.users[index].state == true) {
                       //                    alert("asdf");
                       temp++;
                   } else {
                       temp--;
                   }
                   if(temp == $scope.users.length) {
                       $scope.selectAll = true;
                   } else {
                       $scope.selectAll = false;
                   }

                   var haha = false;
                   for(i in $scope.users) {
                       if($scope.users[i].state == true) {

                       } else {
                           haha = true;
                       }
                   }
                   if(haha) {
                       $scope.selectAll = false;
                   } else {
                       $scope.selectAll = true;
                   }
               }

               //判断年龄
               $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;
                       }
                   }
               }

           });

           //添加用户控制器
           //定义添加用户控制器
           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 = "";
               $scope.updatePwd = function() {
                   for(index in $scope.users) {

                       if($scope.users[index].name == $scope.name) {
                           $scope.users[index].pwd = $scope.pwd1;
                       }
                   }
               }
           });
       </script>

   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h4>用户信息表</h4>
           <div>
               <input type="text" placeholder="用户名查询" size="8" ng-model="gen"> 年龄:
               <select ng-model="size">
                   <option>--请选择--</option>
                   <option>10-20</option>
                   <option>20-30</option>
                   <option>30-40</option>
                   <option>40-50</option>
                   <option>50-60</option>
               </select>
               性别:
               <select>
                   <option>男</option>
                   <option>女</option>

               </select>
               <button ng-click="delectAll()">全部删除</button>
               <button ng-click="delectSel()">批量删除</button>

               <br><br>

           </div>

           <div>
               <table border="1" cellspacing="10" cellpadding="0">
                   <thead>
                       <tr>
                           <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"></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:gen}" ng-if="ageSize(user.age,size)">
                           <td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"></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><br>
           <button class="addUser" ng-click="goToUrl('/addUser')">添加用户</button><br /><br />
           <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>