不同的'全选'复选框用于不同的复选框列表，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

回答

相关问题