Angular js implementiert umfassende Betriebsmethoden wie das Hinzufügen von Benutzern

In diesem Artikel wird hauptsächlich die umfassende Vorgehensweise zum Hinzufügen von Benutzern, Ändern von Passwörtern, sensiblen Wörtern und Dropdown-Menüs in Angular js vorgestellt. Ich hoffe, dass er allen helfen kann.

Im letzten Artikel stellte Ihnen der Herausgeber den Implementierungscode der AngularJS-Fuzzy-Abfragefunktion vor (Dropdown-Menü für Inhalte filtern, sortieren, sensible Zeichen filtern, überprüfen und beurteilen sowie Tabelleninformationen hinzufügen). Ich stelle Ihnen Angular js zum Implementieren des Hinzufügens von Benutzern und Ändern vor. Die umfassenden Betriebsmethoden für Passwörter, sensible Wörter und Dropdown-Menüs lauten wie folgt:

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen Der spezifische Code lautet wie folgt:

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}}	修改密码

添加用户

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

Verwandte Empfehlungen:

Detaillierte Erläuterung von MySQL-Vorgängen wie dem Hinzufügen von Benutzern und der Autorisierung

So verwenden Sie PHP, um Benutzer zu Windows hinzuzufügen_PHP-Tutorial

So verwenden Sie AngularJS zum Ändern des Passworts, Beispielcodefreigabe

Das obige ist der detaillierte Inhalt vonAngular js implementiert umfassende Betriebsmethoden wie das Hinzufügen von Benutzern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!