Angular js 實現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法

更新時間：2017年10月24日 16:31:30 作者：Lucky_Lady

這篇文章主要介紹了Angular js 實現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法,需要的朋友可以參考下

小編在上篇文章給大家介紹了AngularJS模糊查詢功能實現(xiàn)代碼(過濾內容下拉菜單排序過濾敏感字符驗證判斷后添加表格信息)，今天給大家介紹Angular js 實現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法，具體內容如下所示：

廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：

<!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 ="";
      //監(jiān)聽輸入框的內容
      $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;
        //寫入一個狀態(tài)值
        $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>

總結

以上所述是小編給大家介紹的Angular js 實現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能示例
這篇文章主要介紹了Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能,涉及AngularJS過濾器相關搜索、查詢、排序操作技巧,需要的朋友可以參考下
2017-12-12
Angular.js實現(xiàn)動態(tài)加載組件詳解
這篇文章主要給大家介紹了關于Angular.js實現(xiàn)動態(tài)加載組件的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-05-05
Angular 常用指令實例總結整理
這篇文章主要介紹了Angular 常用指令實例總結整理的相關資料,本文整理了常用指令，大家可以參考使用，需要的朋友可以參考下
2016-12-12
詳解為生產(chǎn)環(huán)境編譯Angular2應用的方法
這篇文章主要介紹了詳解為生產(chǎn)環(huán)境編譯Angular2應用的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
angular.bind使用心得
這篇文章主要介紹了angular.bind使用心得，以及個人對于angular.bind的理解，這里分享給大家，希望大家能夠喜歡。
2015-10-10
詳解基于angular-cli配置代理解決跨域請求問題
本篇文章主要介紹了詳解基于angular-cli配置代理解決跨域請求問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
angular簡介和其特點介紹
這篇文章主要介紹了angular簡介和其特點介紹,本文講解了關于和jquery的比較、關于適用場合、關于UI的結合、關于angularjs的特點等內容,需要的朋友可以參考下
2015-01-01
AngularJS前端頁面操作之用戶修改密碼功能示例
這篇文章主要介紹了AngularJS前端頁面操作之用戶修改密碼功能,結合具體實例形式分析了AngularJS針對前端用戶修改密碼的判斷操作實現(xiàn)技巧,需要的朋友可以參考下
2017-03-03
Angular實現(xiàn)響應式表單
本篇文章主要介紹了Angular實現(xiàn)響應式表單，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
AngularJS基礎 ng-keypress 指令簡單示例
本文主要介紹AngularJS ng-keypress 指令,這里對ng-keypress指令的基礎資料整理,并附有實例代碼,需要的小伙伴參考下
2016-08-08