angular 全选 全删 修改 排序
来源：互联网 发布：什么软件可以看轻小说 编辑：程序博客网 时间：2024/06/05 02:46
<head> <meta charset="utf-8" /> <title></title></head><script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script><script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css"> .tab1 { width: 500px; } .tab2 { margin-top: 20px; width: 700px; } fieldset { margin-top: 20px; width: 700px; }</style><body ng-app="myapp" ng-controller="mycontroller"> <div class="div1"> <h5>管理信息</h5> <table class="tab1"> <tr> <td> <input type="button" value="批量删除" ng-click="pldele()" /></td> <td>用户名：<input type="text" ng-keydown="huiche($event)" ng-model="name_1" /></td> <td> <select ng-change="xl()" ng-model="xlname" ng-init="xlname=ags[0]"> <option ng-repeat="ag in ags">{{ag}}</option> </select> </td> <td><input type="button" value="添加" ng-click="add()" /></td> </tr> </table> <table border="1px" cellspacing="0" cellpadding="0" class="tab2"> <tr> <td><input type="checkbox" ng-click="qu()" ng-model="fla" /></td> <td>姓名</td> <td>年龄</td> <td>城市</td> <td>录入日期</td> <td>操作</td> </tr> <tr ng-repeat="emp in emps"> <td><input type="checkbox" ng-checked="dx1" ng-model="dx" ng-click="ck($index)" /></td> <td>{{emp.ename}}</td> <td>{{emp.eage}}</td> <td>{{emp.esite}}</td> <td>{{emp.edate|date:"yyyy-MM-dd HH-mm-ss"}}</td> <td> <input type="button" value="修改" ng-click="xiugai($index)" ng-model="i" /> <input type="button" value="删除" /> </td> </tr> </table> <fieldset ng-show="sos"> <legend>用户添加</legend> 姓名<input type="text" ng-model="name_2" /> <br/> 年龄 <input type="text" ng-model="age_2" /> <br/> 城市 <input type="text" ng-model="site_2" /> <br/> 录入日期 <input type="date" ng-model="date_2" /> <br/> <input type="button" value="保存" ng-click="bz()" ng-model="i" /> </fieldset> </div></body><script type="text/javascript"> var mo = angular.module("myapp", []); mo.controller("mycontroller", function($scope) { $scope.ags = ["年龄正序", "年龄倒序"]; var empss = [{ "ename": "张三", "eage": "20", "esite": "北京", "edate": new Date(), "flas": false }, { "ename": "李四", "eage": "25", "esite": "北京", "edate": new Date(), "flas": false } ] $scope.emps = empss; //每行的checkbox选择状态要改变数组的值 $scope.ck = function($index) { $scope.emps[$index].dx = !$scope.emps[$index].dx; }; //批量删除 $scope.pldele = function() { //删除之后数组会改变所以要反着遍历 for(var i = $scope.emps.length - 1; i >= 0; i--) { var g = $scope.emps[i]; if(g.dx) { $scope.emps.splice(i, 1); } } }; //模糊查询 $scope.huiche = function($event) { var key = $event.keyCode; var enames = []; var name1 = $scope.name_1; if(key == 13) { for(var i = 0; i < empss.length; i++) { if(empss[i].ename.indexOf(name1) != -1) { enames.push(empss[i]); } } $scope.emps = enames; } } //排序 $scope.xl = function() { var xlnames = $scope.xlname; alert(xlnames) if(xlnames == "年龄正序") { $scope.emps.sort(function(a, b) { return a.eage - b.eage; }) } else { $scope.emps.sort(function(a, b) { return b.eage - a.eage; }) } } //点击添加显示点加的div输入框 $scope.add = function() { $scope.sos = true; } //全选/全不选 $scope.qu = function() { //删除之后数组会改变所以要反着遍历 for(var i = $scope.emps.length - 1; i >= 0; i--) { $scope.emps[i].flas = $scope.fla; } //通过获取ng-model的值给ng-checked复制 $scope.dx = $scope.fla; //批量删除 $scope.pldele = function() { //删除之后数组会改变所以要反着遍历 for(var i = $scope.emps.length - 1; i >= 0; i--) { var g = $scope.emps[i].flas; if(g) { $scope.emps.splice(i, 1); } } //全选框赋我faalse $scope.fla = false; }; } $scope.xiugai = function($index) { $scope.sos = true; var nn = $scope.emps[$index].ename; var ee = $scope.emps[$index].eage; var ss = $scope.emps[$index].esite; var dd = $scope.emps[$index].edate; var ff = $scope.emps[$index].flas; //$scope.i会赋值下标 $scope.i = $index; alert($scope.i) $scope.name_2 = nn; $scope.age_2 = ee; $scope.site_2 = ss; $scope.date_2 = dd; } $scope.bz = function() { alert($scope.i) //把添加和修改设同一个值 点击修改时$scope.i会赋值下标 //点击添加时$scope.i 没有被赋值所以是undefined //根据她来使用同一个布局 if($scope.i == undefined) { // 添加 var empes = { "ename": $scope.name_2, "eage": $scope.age_2, "esite": $scope.site_2, "edate": $scope.date_2, "flas": false } empss.push(empes); $scope.emps = empss; //添加完成隐藏div $scope.sos = false; $scope.name_2 = ""; $scope.age_2 = ""; $scope.site_2 = ""; $scope.date_2 = ""; } else { //修改 var newpenson = { "ename": $scope.name_2, "eage": $scope.age_2, "esite": $scope.site_2, "edate": $scope.date_2, "flas": false } empss.splice($scope.i, 1, newpenson); $scope.emps = empss; $scope.sos = false; //修改后从新给 $scope.i赋值undefined $scope.i = undefined } } })</script>阅读全文
1 0
- angular 全选 全删 修改 排序
- angular 的全选 全删
- html angular购物车全选+全删+批量删除+单独删除+模糊查找+筛选价格区间
- Angular 全选
- angular单选全选
- Jquery 的 添加 全选 删除 全删
- angular 增，删，查，排序
- Angular 修改
- 增加+删除+批量删除+修改+查询+排序+全选
- angular输入框点击全选
- Angular全选及批量删除
- Angular修改密码，敏感词汇，排序等操作
- angular排序
- Angular排序
- 全选 全取消
- angular js 综合 循环死数据 全选/反选 过滤 批量删除 提交数据（判断空值） 排序
- html添加子节点 全选 全删 单个删
- asp分页，复选框全选，选中的全删
- Spark Streaming中如何实现Exactly-Once
- RabbitMQ用户增删及权限控制
- RabbitMQ vhost 配置
- Java语言的一些小总结
- RabbitMQ磁盘警报
- angular 全选 全删 修改 排序
- 移动端常见问题总结
- RabbitMQ-Java客户端API指南-上
- RabbitMQ-Java客户端API指南-下
- RabbitMQ吞吐量测试-PerfTest上
- kafka-0.9消费者新API
- RabbitMQ高可用镜像队列
- 机器学习笔记（X）线性模型(VI)类别不平衡问题
- 我国 I T 企业是如何吸引风险投资
