时间:2021-07-01 10:21:17 帮助过:23人阅读
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>增删改查</title> <script src="js/angular.min.js"></script> <script> var app = angular.module("anan", []); app.controller("enen", function($scope) { $scope.user = [{ ck:false, id: 1, name: '李1', pwd: 123456, level: 3 }, { ck:false, id: 2, name: '李2', pwd: 123456, level: 1 }, { ck:false, id: 3, name: '李3', pwd: 123456, level: 3 }, { ck:false, id: 4, name: '李4', pwd: 123456, level: 1 }, { ck:false, id: 5, name: '李5', pwd: 123456, level: 2 }, {ck:false, id: 6, name: '李6', pwd: 123456, level: 3 }, { ck:false, id: 7, name: '李7', pwd: 123456, level: 2 }, { ck:false, id: 8, name: '李8', pwd: 123456, level: 1 }, { ck:false, id: 9, name: '李9', pwd: 123456, level: 2 }, { ck:false, id: 10, name: '李10', pwd: 123456, level: 1 }]; $scope.ckAll=function(){ for(var i=0;i<$scope.user.length;i++){ $scope.user[i].ck=$scope.flag; } } $scope.delso=function(){ var shu=0; for(var i=0;i<$scope.user.length;i++){ if($scope.user[i].ck){ $scope.user.splice(i,1); shu++; i--; } } } $scope.insert=function(m){ var good={ck:false,id:$scope.tid,name:$scope.tname,pwd:$scope.tpwd,level:$scope.tlevel}; $scope.user.push(good); } }) </script> <style type="text/css"> #cll:nth-child(even){ background-color: lightseagreen; } #cll:nth-child(odd){ background-color:#C9C994; } </style> </head> <body ng-app="anan" ng-controller="enen"> <div style="margin: 0 auto; height:800px; width: 1000px; border: 1px solid greenyellow; "> <input placeholder="用户名搜索" ng-model="souname"/> <select ng-model="jb"><option value="">选择级别</option ><option value="1">1</option><option value="2">2</option><option value="3">3</option></select> 排序<select ng-model="px"><option>排序</option> <option value="id">id</option><option value="level">级别</option></select><br/> <button style=" background-color: #008000; margin: 6px; color: #FFFFFF;" ng-click="m=true">新增用户</button><button style="color: #FFFFFF; background-color: crimson;margin: 6px;" ng-click="delso()">批量删除</button> <div style="width: 1000px;border: 1px solid greenyellow;" ng-show="m"> id:<input type="number" ng-model="tid"/> 用户名:<input ng-model="tname"/> 密码:<input ng-model="tpwd"/> 级别:<input type="number" ng-model="tlevel"/> <button ng-click="insert(m=false)">添加</button> </div> <table style="width: 1000px;" border="1px"> <tr style="background-color: cadetblue;"> <td><input type="checkbox" ng-click="ckAll()" ng-model="flag"/></td> <td>id</td> <td>用户名</td> <td>密码</td> <td>级别</td> <td>操作</td> </tr> <tr id="cll" ng-repeat="e in user|orderBy:px:false|filter:{name:souname}|filter:{level:jb}"> <td><input type="checkbox" ng-model="e.ck"/></td> <td>{{e.id}}</td> <td>{{e.name}}</td> <td><span> {{e.pwd}}</span> <span ng-show="f"> <input ng-model="e.pwd" /> <button ng-click="f=false">保存</button> </span></td> <td>{{e.level}}</td> <td><button ng-click="f=true">修改密码</button></td> </tr> </table> </div> </body> </html>
相关推荐:
Angular如何进行服务端渲染开发
Angular4中router使用技巧
angular4共享多个组件数据通信案例详解
以上就是angular 增删改查和验证 的详细内容,更多请关注Gxl网其它相关文章!