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

来源：互联网发布：电子日记本软件编辑：程序博客网时间：2024/05/14 04:43

<!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>

阅读全文

0 0