angularJS全選/批量刪除
阿新 • • 發佈：2019-01-03
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>批量刪除</title> <script src="全選/angular.min.js"></script> <script> var app = angular.module("myApp",[]); //$scope.aa = dd; app.controller("myCtrl",function($scope) { $scope.arr = [{ key:"1", value:"這是第一項" },{ key:"2", value:"這是第二項" },{ key:"3", value:"這是第三項" },{ key:"4", value:"這是第四項" }]; //如果選項全部現在 全選按鍵自動為true$scope.itemCheck = function () { var flag = 0; for(var i = 0; i<$scope.arr.length; i++){ if($scope.arr[i].state == true){ flag ++; } } if(flag == $scope.arr.length){ $scope.allCheck= true; }else{ $scope.allCheck = false; } }; //全選 $scope.allCheck=false; $scope.all= function () { for(var i=0;i<$scope.arr.length;i++){ if($scope.allCheck===true){ $scope.arr[i].state=true; }else { $scope.arr[i].state=false; } } }; //批量刪除 $scope.shanchu = function () { for(var i=0;i<$scope.arr.length;i++){ if($scope.arr[i].state==true){ $scope.arr.splice(i,1); i--; } } } }) </script> </head> <body ng-app="myApp" ng-controller="myCtrl"> <center> <input type="checkbox" ng-model="allCheck" ng-click="all()"/>全選擇 <ul ng-repeat=" i in arr"> <input type="checkbox" ng-model="i.state" ng-click="itemCheck()"> {{i.value}} </ul> <button ng-click="shanchu()">批量刪除</button> </center> </body> </html>