100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > angular实现全选 反选 批量删除 删除 全不选 倒序 模糊查找等功能

angular实现全选 反选 批量删除 删除 全不选 倒序 模糊查找等功能

时间:2024-04-18 18:57:52

相关推荐

angular实现全选 反选 批量删除 删除 全不选 倒序 模糊查找等功能

效果图如下:

html代码如下:

<body ng-app="myApp" ng-controller="myCtrl"><button ng-click="dx(seq)">倒序</button><button ng-click="qx()">全选</button><button ng-click="fx()">反选</button><button ng-click="nontx()">全不选</button><button ng-click="allDel()">全部删除</button><button ng-click="pi()">批量删除</button><input ng-model="search" type="text" placeholder="请输入姓名" /><input ng-model="city" type="text" placeholder="请输入国家" /><table width="800" border="1"><tr align="center"><td >全选</td><td>序号</td><td>国家</td><td>名字</td><td>年龄</td><td>删除</td></tr><tr align="center" ng-repeat="x in lists | orderBy:order+orderBy | filter :{country:search}|filter:{name:city}"><td><input type="checkbox" ng-model="x.ck" /></td><td>{{x.seq}}</td><td>{{x.name}}</td><td>{{x.country}}</td><td>{{x.age}}</td><td><button ng-click="del($index)"> 删除</button></td></tr></table></body>

js代码如下:

var vm=angular.module('myApp',[])vm.controller('myCtrl',function($scope){$scope.lists=[{ seq: 1, name: "魏国", country: "曹操",age : 45 ,state:'false'},{ seq: 2, name: "魏国", country: "张辽" ,age: 34,state:'false'},{ seq: 3, name: "魏国", country: "司马懿" ,age: 36,state:'false' },{ seq: 4, name: "魏国", country: "夏侯淳",age: 40,state:'false' },{ seq: 5, name: "蜀国", country: "刘备",age: 50,state:'false' },{ seq: 6, name: "蜀国", country: "关羽",age: 45,state:'false' },{ seq: 7, name: "蜀国", country: "张飞",age: 46,state:'false' },{ seq: 8, name: "蜀国", country: "赵云",age: 35,state:'false' },{ seq: 9, name: "吴国", country: "孙权" ,age: 30,state:'false' },{ seq: 10, name: "吴国", country: "周瑜",age: 32 ,state:'false'},{ seq: 11, name: "吴国", country: "鲁肃",age: 33,state:'false' },{ seq: 12, name: "吴国", country: "黄盖",age: 55,state:'false' }]// 倒序$scope.order=" "$scope.dx=function(type){$scope.orderType=type ; if ($scope.order === '') {$scope.order="-"} else{$scope.order=""}}//全选$scope.qx=function(){for (var i=0 ; i<$scope.lists.length ; i++) {var x=$scope.lists[i]if (x.ck==x.ck) {x.ck=true} }}//反选$scope.fx=function(){for (var i=0 ; i<$scope.lists.length ; i++) {var x=$scope.lists[i]if (x.ck==x.ck) {x.ck=!x.ck}}}//全不选$scope.nontx=function(){for (var i=0 ; i<$scope.lists.length ; i++) {var x=$scope.lists[i]if (x.ck==x.ck) {x.ck=false}}}//批量删除$scope.pi=function(){//alert("是否删除此数据")for (var i=0 ; i<$scope.lists.length ; i++) {if ($scope.lists[i].ck==true) {$scope.lists.splice(i,1)i--;}}}//删除$scope.del=function(index){if (confirm('确认要删除此数据吗?')) {$scope.lists.splice(index,1)}}//全部删除$scope.allDel=function(){if ($scope.lists.length == 0) {alert("数据已清空")} else{$scope.lists=[]}}// 添加 修改数据})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。