不同的'全選'複選框用於不同的複選框列表，angularjs

在我的頁面上，我有三個複選框列表。每個列表都有自己的複選框「全選」。我不想增加代碼複製行，這就是爲什麼我使用的是參數相同的功能選擇複選框不同的'全選'複選框用於不同的複選框列表，angularjs

 $scope.selectAll = function(array) { 
      angular.forEach(array, function(item) { 
       item.Selected = $scope.model.selectedAll; 
      }); 
     };

HTML

<input type="checkbox" 
      ng-model="model.selectedAll" 
      ng-change="selectAll(categories)" >

的某些列表它給了我理想的結果，我可以選擇特定數組中的所有複選框。但這是問題所在。 $scope.model.selectedAll與所有列表相關，當我在一個列表中選中所有列表時，所有列表中都會選中「全選」複選框。

我很清楚這個問題，我只是不知道如何解決它。我一直在考慮爲每個列表創建3個不同的變量，但是我使用帶有參數的函數，其中數組是未知的，所以我不能將某個變量與它關聯，並且它不會工作。

有沒有辦法解決這個問題，而不復制特定列表的複選框的代碼？

在此先感謝。

here is my plunker

來源

2016-11-07 antonyboom

難道你不能將一個布爾值傳遞給'$ scope。selectAll（）'選擇是否選擇或取消選擇，而不是在函數內部查找DOM節點？ – ebyrob

@ebyrob如果我傳遞布爾值，那麼binging將只有一種方式，它將是錯誤的或真實的。 – antonyboom

你這樣做的方式結合一組非相關實體的到相同型號，這意味着你已經束縛他們非常緊密。顯然，我們的目標是讓他們分開，所以你需要一個不同的模型，並且有幾種方法可以做到這一點。

使用完全是獨一無二的型號

一種方式來做到這一點，只是讓你的代碼變得更通用，然後一系列與每個複選框相關的，像這樣獨特的車型：

HTML

<input type="checkbox" 
     ng-model="model1.selectedAll" 
     ng-change="selectAll(categories1, model1.selectedAll">

$scope.selectAll = function(array, value) { 
    angular.forEach(array, function(item) { 
    item.Selected = value; 
    }); 
};

使用基本型號

另外，如果你不想要跟蹤多個變量，你可以封裝成一個單一的基地。如果您有動態創建的元素，此方法很有用。

HTML

<input type="checkbox" 
     ng-model="modelSet[key].selectedAll" 
     ng-change="selectAll(categories, key)">

$scope.selectAll = function(array, key) { 
    angular.forEach(array, function(item) { 
    item.Selected = $scope.modelSet[key].selectedAll; 
    }); 
};

不管你做什麼，請注意您選擇功能越來越從$範圍的觀點，少信息的詳細信息。您希望爲您的實用程序功能提供儘可能多的上下文，以便它可以更可靠地重用。

來源

2016-11-07 18:41:20

謝謝多米尼克，第二種方式正是我所期待的。 – antonyboom

很高興我可以幫助:) –

不同的'全選'複選框用於不同的複選框列表，angularjs

回答

相關問題