本文主要介绍了angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法,需要的朋友可以参考下,希望能帮助到大家。
小编在上篇文章给大家介绍了AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息),今天给大家介绍Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法,具体内容如下所示:
废话不多说了,直接给大家贴代码了,具体代码如下所示:
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>用户信息表</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}} |
相关推荐:
以上就是Angular js 实现添加用户等综合操作方法的详细内容,更多请关注php中文网其它相关文章!
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号