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. 最后，在调用ModifyFilter 之前不要将activeFilter.checked 更改为false -> ModifyFilter 尝试将activeFilter 的另一个副本推送到$scope.ActiveFilters，从而导致重复错误：

   “错误：[ngRepeat:dupes] 不允许在中继器中重复。使用“track by”表达式指定唯一键。中继器：ActiveFilters 中的 activeFilter，重复键：对象：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。

关于你的第三个问题：不能说。通过这些修复，我看不出这种方法有什么大问题。但不要认为我的话是理所当然的...... :)