AngularJS 中嵌套复选框的编程 check/un-check

Question

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

需要实现以下目标。

在检查父项时打开嵌套
显示活动的复选框
通过取消选中并单击项目名称来删除（从 activeFilters 数组拼接）。
能够清除所有复选框。

我已经完成了 90%：看这个 Fiddle。

问题是：

正确的移除绑定只对顶层（设备）有效。
我无法从数组中拼接单个项目并且它正确绑定（我的意思是删除复选框和活动的 <li> 元素）。
这是否适合制作应用程序？

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

此处注意事项：

你没有removeFilter功能介绍，只有removeSingleFilter
无论如何，您的 ModifyFilter 函数没有 return 任何可以用作另一个函数的参数的东西。
最后，在调用 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

Fix for this is simply setting activeFilter.checked to false, and then invoking only ModifyFilter (which perhaps isn't the best name for the function, but anyway does it's job just fine). Here a naive approach:

<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。

关于你的第三个问题，不好说。通过这些修复，我看不出这种方法有任何大问题。但是不要把我的话当成理所当然... :)

AngularJS 中嵌套复选框的编程 check/un-check

programatic check/un-check of nested checkboxes in AngularJS

javascript

arrays

checkbox

angularjs