小编在上篇文章给大家介绍了AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)，今天给大家介绍Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法，具体内容如下所示：
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!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="https://www.jb51.net/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>
总结