이번에는 Angular js로 사용자를 조작하는 방법을 알려드리겠습니다. 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>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
mockjs를 사용하여 백엔드 데이터를 시뮬레이션하는 방법
위 내용은 Angular js에서 사용자를 조작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!