javascript - AngularJS 中嵌套复选框的编程检查/检查

Question

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

需要实现以下目标。

1. 检查父级后打开巢
2. 显示事件复选框
3. 通过取消选中并单击项目名称来删除(从 activeFilters 数组中拼接)。
4. 能够清除所有复选框。

我已完成 90%:请参阅此 Fiddle 。

问题是:

1. 正确的移除绑定(bind)仅适用于顶层(设备)。
2. 我无法从数组中拼接单个项目，并且它可以正确绑定(bind)(我的意思是删除复选框和事件的 <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，导致重复错误:

   "Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: activeFilter in ActiveFilters, 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函数内部。

关于你的第三个问题:很难说。通过这些修复，我认为这种方法没有任何大问题。但不要认为我的话是理所当然的......:)