Angular js 对添加用户，修改密码，敏感字，下拉菜单的综合操作

最新推荐文章于 2021-10-13 11:04:00 发布
再见_
最新推荐文章于 2021-10-13 11:04:00 发布
阅读量531
点赞数
分类专栏： it
本文链接：https://blog.csdn.net/qq_38719030/article/details/78330044
版权
it 专栏收录该内容
4 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            border-collapse: collapse;
        }
        th,td{
            padding: 10px;
            border: 1px solid #000000;
        }
    </style>
    <script src="../angular-1.5.5/angular.min.js"></script>
    <script>
        var myapp = angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
              $scope.data = [{
                  "id":1,
                  "name":"张三",
                  "pwd":"123",
                  "age":22,
                  "sex":"男",
                  "check":false
              },
                  {
                      "id":2,
                      "name":"李四",
                      "pwd":"456",
                      "age":33,
                      "sex":"男",
                      "check":false
                  },
                  {
                      "id":3,
                      "name":"王五",
                      "pwd":"789",
                      "age":44,
                      "sex":"女",
                      "check":false
                  }];

            $scope.show = false;
              //添加用户
            $scope.add = function () {
                $scope.show = true;
            }
                //添加
               $scope.submit = function () {
                   if($scope.name==""){
                       alert("请输入姓名")
                   }else if($scope.correct==true){
                       //进行修改的操作
                       $scope.data[$scope.index].pwd = $scope.pwd;

                   }else{
                       //添加的操作
                       $scope.data.push({"name":$scope.name,"pwd":$scope.pwd,"age":$scope.age,"sex":$scope.sex});
                       $scope.show = false;
                   }

            }
            //用户名查询。不能含有敏感字
            $scope.search = "";
            $scope.search2 ="";
            //监听输入框的内容
            $scope.$watch("search",function (value) {
                if(value.indexOf("我")!=-1){
                    alert("含有敏感字");
                    $scope.search = "";

                }else{
                    $scope.search2 = $scope.search;
                }
            });

            //年龄筛选
            $scope.opt = "请选择";
            $scope.ageFilter = function (item) {
                if($scope.opt!="请选择"){
                   var opt = $scope.opt;
                   var ageArr = opt.split("-");
                   var max = ageArr[1];
                   var min = ageArr[0];
                   var age = item.age;
                   if(age<min||age>max){
                      return false;
                   }else{
                       return true;
                   }
                }else{
                    return true;
                }
            };


           //性别筛选
          $scope.sexthis = "请选择";
          $scope.sexFun = function (item) {
              if($scope.sexthis!="请选择"){
                  //如果性别==男||性别==女
                  if(item.sex==$scope.sexthis)
                   {
                      return true;

                  }else{
                      return false;
                  }
              }else{
                  return true;
              }
          }

            //全选
            $scope.checkAll = false;
            $scope.checkWhat = function () {
                if ($scope.checkAll == true) {
                    for (var i = 0; i < $scope.data.length; i++) {
                        $scope.data[i].check = true;
                    }
                } else {
                    for (var i = 0; i < $scope.data.length; i++) {
                        $scope.data[i].check = false;
                    }
                }

            };
            //反选
            var n = 0;
           $scope.checkIt =function (index) {
               console.log(index)
              if($scope.data[index].check==true){
                    n++;
               }else{
                   n--;
               }
               if(n==$scope.data.length){
                   $scope.checkAll=true;
               }else{
                   $scope.checkAll = false;
               }

           };

            //点击修改密码
           $scope.correct = function (index) {
               $scope.show = true;
               $scope.name  = $scope.data[index].name;
               $scope.pwd = $scope.data[index].pwd;

               //写入一个状态值
               $scope.correct = true;

               //记录索引
               $scope.index = index;
           }



           //全部删除
            $scope.delAll = function () {
                $scope.data.length=0;
            }

            //批量删除
            $scope.del = function () {
                for(var i = 0;i<$scope.data.length;i++){
                    if($scope.data[i].check ==true){
                        $scope.data.splice(i,1);
                        i--;
                    }
                }
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<h2>用户信息表</h2>
<input type="text" placeholder="用户名查询" ng-model="search">
年龄<select ng-model="opt" ng-change="fun()">
    <option>请选择</option>
    <option>10-20</option>
    <option>20-30</option>
    <option>30-40</option>
</select>
性别<select ng-model="sexthis" ng-change="fun()">
    <option>请选择</option>
    <option>男</option>
    <option>女</option>
</select>
<button ng-click="delAll()">全部删除</button>
<button ng-click="del()">批量删除</button>
<table>
    <thead>
    <tr>
        <th><input type="checkbox" ng-model="checkAll" ng-click="checkWhat()"></th>
        <th>id</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="item in data|filter:{name:search2}|filter:ageFilter|filter:sexFun">
        <td><input type="checkbox" ng-model="item.check" ng-click="checkIt($index)"></td>
        <td>{{$index}}</td>
        <td>{{item.name}}</td>
        <td>{{item.pwd}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td><button ng-click="correct($index)">修改密码</button></td>
    </tr>
    </tbody>
</table>
<button ng-click="add()">添加用户</button>
<ul ng-show="show">
    <li>用户名<input type="text" placeholder="请输入用户名" ng-model="name"></li>
    <li>密码<input type="text" placeholder="请输入密码" ng-model="pwd"></li>
    <li>年龄<input type="text" placeholder="请输入年龄" ng-model="age"></li>
    <li>性别<input type="text" placeholder="请输入性别" ng-model="sex"></li>
    <li><button ng-click="submit()">提交</button></li>
</ul>
</body>
</html>