用angular實現多選按鈕的全選與反選
阿新 • • 發佈：2019-01-10
在頁面中我們常常會遇到多選框，例如購物車裡的商品
下面用angular來實現這一功能
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> </head> <body ng-app="select" ng-controller="moreSel"> 全選: <input type="checkbox" ng-checked="checks" ng-click="checks = !checks; all(checks)"> <!--track by $index去掉也可以--> <div ng-repeat="item in datas track by $index"> <input type="checkbox" ng-checked="chkItem[$index]" ng-click="ck(chkItem[$index]==undefind?false:chkItem[$index], item, $index)">{{ item }} </div> <pre>{{arr}}</pre> </body> <script> //建立模組 angular.module("select", []) //控制器 .controller("moreSel", function ($scope) { $scope.datas = ["C++","Html","Javascript"]; $scope.arr = [];//用來顯示選中的內容 //用來標誌每一項的狀態 $scope.chkItem = []; //全選 $scope.all = function (checks) { //初始化設定狀態 init(checks); //將選中的內容賦值到陣列中 if(checks) { for(var i = 0; i < $scope.datas.length; i++) { $scope.arr[i] = $scope.datas[i]; } }else { $scope.arr = []; } } //點選選擇 $scope.ck = function (state, item, index) { //取狀態的相反值 $scope.chkItem[index] = !state; //有一個為false則全選按鈕為不選中 if(!$scope.chkItem[index]){ $scope.checks = false; //取消選中，將數值從arr陣列中刪除掉 var num = $scope.arr.indexOf(item); $scope.arr.splice(num, 1); }else { //選中追加進去 $scope.arr.push(item); for(var i = 0; i < $scope.datas.length; i++) { //只要有一個按鈕沒有選中 if(!$scope.chkItem[i]){ return; } } //全部選中 $scope.checks = true; } } //初始化 var init = function (sel) { for(var i = 0; i < $scope.datas.length; i++) { //sel沒有值 預設初始化false $scope.chkItem[i] = sel || false; } } }); </script> </html>