在AngularJS中对嵌套复选框进行编程检查/取消检查

Question

我正在使用AngularJS隐藏JSON数组中数据的一系列复选框。

需要实现以下目标。

1. 检查父级
时打开嵌套
2. 显示有效复选框
3. 通过取消选中并单击项目名称来删除（与activeFilters数组拼接）。
4. 能够清除所有复选框。

我90％的完成方式：请参阅此Fiddle。

问题是：

1. 正确的删除绑定仅适用于顶层（设备）。
2. 我无法将单个项目从数组中拼接出来并且绑定正确（我的意思是删除复选框和活动的<li>元素）。
3. 这是否适合制作应用？

Answer 1

对于问题1，您可以在$scope.clearFilters代码中找到它：

angular.forEach($scope.Filters[0].filters, function(filter) {

即。你只检查第一组。您需要使用其他级别的嵌套，例如：

angular.forEach($scope.Filters, function (filtersGroup) {
  angular.forEach(filtersGroup.filters, function(filter) {
    // etc

问题2，我不确定你现在要做什么。

<li ng-model="activeFilter.checked" ng-click="removeFilter(ModifyFilter(activeFilter.checked,activeFilter))">

这里注意到的事情：

1. 您没有引入removeFilter功能，只有removeSingleFilter
2. 无论如何，你的ModifyFilter函数不返回任何内容，可以用作另一个函数的参数。
3. 最后，在调用activeFilter.checked之前，您不会将ModifyFilter更改为false - ＆gt; ModifyFilter尝试将activeFilter的另一个副本推送到$scope.ActiveFilters，从而导致重复错误：

     

   “错误：[ngRepeat：dupes]不允许在转发器中使用重复项。使用'track by'表达式指定唯一键.Repeater：ActiveFilters中的activeFilter，Duplicate key：object：00E

     修复此问题只是将activeFilter.checked设置为false，然后仅调用ModifyFilter（这可能不是函数的最佳名称，但无论如何它的工作都很好）。这是一种天真的方法：

<li ng-model="activeFilter.checked" ng-click="activeFilter.checked = !activeFilter.checked; ModifyFilter(activeFilter.checked,activeFilter)"

但也许使用一个函数可能更干净，像这样：

$scope.deactivateFilter = function (filter) {
    filter.checked = !filter.checked;
    $scope.ModifyFilter(filter.checked, filter);
};

并像这样使用它：

<li ng-model="activeFilter.checked" ng-click="deactivateFilter(activeFilter)">

最后，我或许也可以重构你的ModifyFilter函数，只需要在函数内只选择一个参数filter，然后选择filter.checked。

关于你的第三个问题：真的不能说。有了这些修复，我认为这种方法没有任何大问题。但是不要把我的话当作理所当然......：）