您的位置：首页 > Web前端 > AngularJS

AngularJS综合用户信息, 表单验证,过滤查询,全选反选,批量删除,修改,添加

2017-10-21 13:02 921 查看

<!DOCTYPE html>

<html>

   <head>

       <meta charset="UTF-8">

       <title></title>

       <script type="text/javascript" src="../AngularJS库/angular.js" ></script>

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

       <script>

           var app = angular.module("myApp",["ngRoute"]);

           //配置config

           app.config(["$routeProvider",function($routeProvider){

               $routeProvider

               .when("/",{

                   template:""

               })

               .when("/addUser",{

                   templateUrl:"addUser.html",

                   controller:"addUserCtrl"

               })

               .when("/updatePwd/:name",{

                   templateUrl:"updatePwd.html",

                   controller:"updatePwdCtrl"

               })

               .otherwise({redirectTo:"/"});

           }]);



           //路由的控制器addUser

           app.controller("addUserCtrl",function($scope){

               //提交按钮的各输入框初始值

           $scope.addName = "";

           $scope.addPwd = "";

           $scope.addPwd2 = "";

           $scope.addAge = "";

           $scope.addSex = "";



           //提交按钮的点击事件

           $scope.tijiao = function(){

               var flag = true;

               //拿到各个输入框的值

               if($scope.addName==""||$scope.addName==null){

                   alert("用户名不能为空");

                   flag = false;

               }

               if($scope.addPwd==""||$scope.addPwd==null){

                   alert("密码不能为空");

                   flag = false;

               }

               if($scope.addPwd2==""||$scope.addPwd2==null){

                   alert("确认密码不能为空");

                   flag = false;

               }else{

                   if($scope.addPwd!=$scope.addPwd2){

                       alert("两次密码输入不一致");

                       flag = false;

                   }

               }

               if($scope.addAge==""||$scope.addAge==null){

                   alert("年龄不能为空");

                   flag = false;

               }else{

                   if($scope.addAge>60||$scope.addAge<10){

                       alert("年龄必须在10-60之间");

                       flag = false;

                   }

               }

               if($scope.addSex==""||$scope.addSex==null){

                   alert("性别不能为空");

                   flag = false;

               }



               //判断flag 标记

               if(flag){

                   //alert("添加成功");

               /*   {

                   name:"张三",

                   pwd:"123",

                   age:22,

                   sex:"男",

                   state:false

               }*/

               //创建新的对象

               $scope.duixiang ={

                   name:$scope.addName,

                   pwd:$scope.addPwd,

                   age:$scope.addAge,

                   sex:$scope.addSex,

                   state:false

               };

               $scope.userArr.push($scope.duixiang);

               }

           };



           });

           //路由的控制器updatePwd

           app.controller("updatePwdCtrl",function($scope,$routeParams){

           $scope.updateName = $routeParams.name;

           $scope.updateOldPwd = "";//填写的旧密码

           $scope.updateNewPwd = "";//新密码

           $scope.updateQuerenPwd = "";//确认密码

           $scope.oldPwd = "";//数组原来的旧密码

           //修改密码的修改的点击事件

           $scope.xiugai = function(){



               for(var i=0;i<$scope.userArr.length;i++){

                   if($scope.updateName==$scope.userArr[i].name){

                       //拿到当前这个修改的用户名的人,,,取出他的原来的旧密码

                       $scope.oldPwd = $scope.userArr[i].pwd;

                   }

               }



               //alert($scope.oldPwd);





               var flag2 = true;

               if($scope.updateOldPwd==""||$scope.updateOldPwd==null){

                   alert("旧密码不能为空");

                   flag2 = false;

               }else{

                   //判断原来的旧密码是否和现在输入的旧密码一样

                   if($scope.updateOldPwd==$scope.oldPwd){



                   }else{

                       alert("旧密码输入错误");

                       flag2 = false;

                   }

               }

               if($scope.updateNewPwd==""||$scope.updateNewPwd==null){

                   alert("新密码不能为空");

                   flag2 = false;

                 }

               if($scope.updateQuerenPwd==""||$scope.updateQuerenPwd==null){

                   alert("确认密码不能为空");

                   flag2 = false;

                 }else{

                    if($scope.updateQuerenPwd==$scope.updateNewPwd){



                    }else{

                        alert("确认密码输入错误");

                       flag2 = false;

                    }

                 }



               //判断flag2

               if(flag2){

                  //条件都满足.修改数据

                  for(var i=0;i<$scope.userArr.length;i++){

                   if($scope.updateName==$scope.userArr[i].name){

                       //拿到当前这个修改的用户名的人,,把新密码赋值给原来的旧密码

                       $scope.userArr[i].pwd = $scope.updateNewPwd;

                   }

               }



               }

           }//点击事件的括号

           });





           app.controller("myCtrl",function($scope,$location){

               //定义数组

               $scope.userArr = [{

                   name:"张三",

                   pwd:"123",

                   age:22,

                   sex:"男",

                   state:false

               },{

                   name:"李四",

                   pwd:"456",

                   age:33,

                   sex:"女",

                   state:false

               },{

                   name:"王五",

                   pwd:"789",

                   age:44,

                   sex:"男",

                   state:false

               }];



               $scope.agechaxun = "--请选择--";

               //根据年龄范围查询,,,返回true或false ng-if显示或隐藏

               $scope.ageSelect = function(age,agechaxun){

                   if(agechaxun=="--请选择--"){

                       //如果什么也没选,就都显示

                       return true;

                   }else{

                       //将agechaxun进行拆分

                       var ageSplitArr = agechaxun.split("-");

                       //拿到范围中的最大值与最小值

                       var ageMin = ageSplitArr[0];

                       var ageMax = ageSplitArr[1];

                       if(age>=ageMin&&age<=ageMax){

                           return true;

                       }else{

                           return false;

                       }

                   }

               };



               //根据性别查询的

               $scope.sexchaxun = "--请选择--";

               $scope.sexSelect = function(sex,sexchaxun){

                   if(sexchaxun=="--请选择--"){

                       return true;

                   }else{

                   if(sexchaxun==sex){

                       return true;

                   }else{

                       return false;

                   }

                   }

               };



           //全部删除的点击事件

           $scope.deleteAll = function(){

               //清空数组

               $scope.userArr = [];

           };



           //默认的全选按钮是false

           $scope.checkAll = false;

           //点击全选按钮的事件,,需要计数器

           var a=0;//计数器

           $scope.selectAll = function(){

               //判断当前是选中还是没选中

               if($scope.checkAll==true){

                   //遍历数组,全部选中

                   for(var i=0;i<$scope.userArr.length;i++){

                       $scope.userArr[i].state=true;

                       a++;//计数器加到变成数组长度

                   }

                   //a=$scope.userArr.length;

               }else{

                   //遍历数组,全部取消选中

                   for(var i=0;i<$scope.userArr.length;i++){

                       $scope.userArr[i].state=false;

                       a--;//计数器变成0

                   }

                   //a=0;

               }

           };



           //点击单个按钮时候判断是否全选,,反向

           $scope.selectOne = function(index){

               //index是当前这一行的角标

               if($scope.userArr[index].state==true){

                   //如果当前这一行的按钮是选中了,就计数器加1

                   a++;

               }else{

                   a--;

               }

               //判断a的值,,是否等于数组长度

               if(a==$scope.userArr.length){

                   //让全选按钮也选中

                   $scope.checkAll = true;

               }else{

                   $scope.checkAll = false;

               }

           };



           //点击批量删除按钮的事件

           $scope.piliangDelete = function(){

               //判断是否有选中的

               if(a==0){

                   alert("请选择要删除的");

               }else{

                   for(var i=0;i<$scope.userArr.length;i++){

                       if($scope.userArr[i].state==true){

                           //如果当前选中了就删除

                           $scope.userArr.splice(i,1);

                           //因为删除了当前这一行,,下标可能会越界,所以i--

                           i--;

                           //删除了以后计数器也减

                           a--;

                       }

                   }

                   //最后变成没选中的状态

                   $scope.checkAll = false;

               }

           };





           //点击添加按钮的事件,,控制下面的添加数据的按钮表格显示隐藏

           /*$scope.xianshiyincang = true;//初始时隐藏

           $scope.toggle = function(){

               $scope.xianshiyincang = !$scope.xianshiyincang;

           };*/







           //$scope.xianshiyincang2 = true;//一开始是隐藏的

           //$scope.updateName = "";//用户名框的默认值

           //修改密码框点击事件

       /*   $scope.toggle2 = function(index){

               //控制下方表格显示隐藏

               $scope.xianshiyincang2 = !$scope.xianshiyincang2;

               //修改密码直接显示用户名不可更改

               $scope.updateName = $scope.userArr[index].name;

           };*/



           //跳转路由点击事件

               $scope.goToUrl = function(url){

                       $location.path(url);

               };







           });

       </script>

   </head>

   <body ng-app="myApp" ng-controller="myCtrl">

       <center>

       <h2>用户信息表</h2>

       <input type="text" ng-model="yhmchaxun" size="8" placeholder="用户名查询"/>

       年龄:

       <select ng-model="agechaxun">

           <option>--请选择--</option>

           <option>11-20</option>

           <option>21-30</option>

           <option>31-40</option>

           <option>41-50</option>

           <option>51-60</option>

       </select>

       性别:<select ng-model="sexchaxun">

           <option>--请选择--</option>

           <option>男</option>

           <option>女</option>

       </select>

       <button ng-click="deleteAll()">全部删除</button>

       <button ng-click="piliangDelete()">批量删除</button>



       <br /><br />

       <table border="1" cellpadding="7" cellspacing="1" width="50%">

           <thead>

               <tr>

                   <th>

   <input type="checkbox" ng-model="checkAll" ng-click="selectAll()"/>全选

                   </th>

                   <th>用户名</th>

                   <th>密码</th>

                   <th>年龄</th>

                   <th>性别</th>

                   <th>操作</th>

               </tr>

           </thead>

           <tbody align="center">

<tr ng-repeat="x in userArr | filter:{name:yhmchaxun}" ng-if="ageSelect(x.age,agechaxun)"

   ng-show="sexSelect(x.sex,sexchaxun)">

                   <td>

       <input type="checkbox" ng-model="x.state" ng-click="selectOne($index)"/>

                   </td>

                   <td>{{x.name}}</td>

                   <td>{{x.pwd}}</td>

                   <td>{{x.age}}</td>

                   <td>{{x.sex}}</td>

                   <td>

<button ng-click="goToUrl('/updatePwd/'+x.name)">修改密码</button>

                   </td>



               </tr>

           </tbody>

       </table>

       <br />

<button style="width: 130px;font-size: 20px;" ng-click="goToUrl('/addUser')">添加用户</button>

   <br /><br />

   

   <div ng-view=""></div>



   <script type="text/ng-template" id="addUser.html">

   <table border="1" cellpadding="10" cellspacing="1">

               <tbody>

                   <tr>

                       <th>用户名:</th>

           <td><input type="text" ng-model="addName"></td>

                   </tr>

                   <tr>

                       <th>密码:</th>

           <td><input type="text" ng-model="addPwd"></td>

                   </tr>

                   <tr>

                       <th>确认密码:</th>

           <td><input type="text" ng-model="addPwd2"></td>

                   </tr>

                   <tr>

                       <th>年龄:</th>

           <td><input type="text" ng-model="addAge"></td>

                   </tr>



                   <tr>

                       <th>性别:</th>

           <td><input type="text" ng-model="addSex"></td>

                   </tr>

                   <tr align="center">

                       <td colspan="2">

       <input type="button" value="提交" ng-click="tijiao()" />

                       </td>

                   </tr>

               </tbody>

           </table>

           </script>

       <br />

       

       <script type="text/ng-template" id="updatePwd.html">

       <table border="1" cellpadding="10" cellspacing="1">

               <tbody>

                   <tr>

                       <th>用户名:</th>

           <td><input type="text" disabled="disabled" ng-model="updateName"></td>

                   </tr>

                   <tr>

                       <th>旧密码:</th>

           <td><input type="text" ng-model="updateOldPwd"></td>

                   </tr>

                   <tr>

                       <th>新密码:</th>

           <td><input type="text" ng-model="updateNewPwd"></td>

                   </tr>

                   <tr>

                       <th>确认密码:</th>

           <td><input type="text" ng-model="updateQuerenPwd"></td>

                   </tr>



                   <tr align="center">

                       <td colspan="2">

       <input type="button" value="修改" ng-click="xiugai()"/>

                       </td>

                   </tr>

               </tbody>

           </table>

           </script>

       </center>

   </body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航