小編在上篇文章給大家介紹了AngularJS模糊查詢功能實現(xiàn)代碼(過濾內(nèi)容下拉菜單排序過濾敏感字符驗證判斷后添加表格信息)，今天給大家介紹Angular js 實現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法，具體內(nèi)容如下所示：
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
<!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)聽輸入框的內(nèi)容 $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>總結(jié)
以上所述是小編給大家介紹的Angular js 實現(xiàn)添加用戶、修改密碼、敏感字、下拉菜單的綜合操作方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
