Question

在我的页面上，我有三个复选框列表。每个列表都有一个自己的复选框“全选”。我不想用复制行增加代码，这就是为什么我使用与参数相同的函数来选择某些复选框列表

path: '**'

html

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

它给了我理想的结果，我可以选择某个数组中的所有复选框。但这是问题所在。 <input type="checkbox" ng-model="model.selectedAll" ng-change="selectAll(categories)" >与所有列表相关，当我在一个列表中选择all时，在所有列表中选中复选框“select all”。

我清楚地了解这个问题，我只是不知道如何解决它。我一直在考虑为每个列表创建3个不同的变量但是我使用带参数的函数，其中数组是未知的，所以我不能将某个变量与它关联起来并且它不起作用。

有没有办法解决这个问题而不重复特定复选框列表的代码？

提前感谢。

here is my plunker

Answer 1

你这样做的方式将一组不相关的实体绑定到同一个模型，这意味着你将它们绑定得非常紧密。显然，目标是将它们分开，因此您需要一个不同的模型，并且有几种方法可以做到这一点。

使用完全独特的模型

这样做的一种方法是让代码更加通用，然后与每个复选框关联一系列独特的模型，如下所示：

HTML 的

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

JS

$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)">

JS

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

无论您做什么，请注意您的选择功能从视图中获取更多信息，并从$ scope中获取更少信息。您希望为实用程序功能提供尽可能多的上下文，以便可以更可靠地重用它。

不同的'全选'复选框，用于不同的复选框列表，angularjs

1 个答案: