Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
程序员文章站
2022-03-20 22:16:05
小编在上篇文章给大家介绍了angularjs模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息),今天给大家介绍angular js 实现添加用户...
小编在上篇文章给大家介绍了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="../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>
总结
以上所述是小编给大家介绍的angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法,希望对大家有所帮助