Angular js implements comprehensive operation methods such as adding users

This article mainly introduces the comprehensive operation method of adding users, changing passwords, sensitive words, and drop-down menus in Angular js. Friends in need can refer to it. I hope it can help everyone.

In the last article, the editor introduced you to the implementation code of AngularJS fuzzy query function (filtering content drop-down menu, sorting, filtering sensitive characters, adding table information after verification and judgment). Today I will introduce to you Angular js to implement adding users and modifying The comprehensive operation methods of passwords, sensitive words, and drop-down menus are as follows:

Without further ado, I will just post the code for you. The specific code is as follows:

nbsp;html>


  <meta>
  <title>Title</title>
  <style>
    table{
      border-collapse: collapse;
    }
    th,td{
      padding: 10px;
      border: 1px solid #000000;
    }
  </style>
  <script></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>


<h2 id="用户信息表">用户信息表</h2>
<input>
年龄<select>
  <option>请选择</option>
  <option>10-20</option>
  <option>20-30</option>
  <option>30-40</option>
</select>
性别<select>
  <option>请选择</option>
  <option>男</option>
  <option>女</option>
</select>
<button>全部删除</button>
<button>批量删除</button>

                                                                                             

	id	用户名	密码	年龄	性别	操作
	{{$index}}	{{item.name}}	{{item.pwd}}	{{item.age}}	{{item.sex}}	修改密码

添加用户

  
• 用户名
  
• 密码
  
• 年龄
  
• 性别
  
• 提交

Related recommendations:

Detailed explanation of Mysql adding users and authorization operations

How to use PHP to add users to windows_PHP tutorial

How to use Angularjs to change password example code sharing

The above is the detailed content of Angular js implements comprehensive operation methods such as adding users. For more information, please follow other related articles on the PHP Chinese website!