angular實現全選，反選，批量刪除，刪除，全不選，倒序，模糊查詢等功能
阿新 • • 發佈：2018-12-15
效果圖如下：
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=[] } } // 新增 修改資料 })