javascript - 如果使用 Angular 单击任何复选框，则将 ng-class 应用于父元素？

Question

我有一个父级列表，其中包含一个复选框下拉列表，如果单击该列表，您就可以看到这些复选框。我想要做的是，如果选中任何复选框，则将父列表类设置为“事件”。现在发生的情况是我有多个列表，因此如果选中该复选框，则当我只需要复选框所在的列表来获取“事件”类时，所有列表都将获取该类。如何重构它，以便仅将“事件”类提供给父列表，而不是所有列表？

HTML:

<ul ng-repeat="type in filterTypes">
    <li ng-repeat="filter in type.filters" ng-class="{active:checked}">{{filter.value | uppercase}}
        <ul>
            <li ng-repeat="option in filter.options">
                <label>
                    //if any checkbox is checked, the active class should be given to the parentd list at the way top.
                    <input type="checkbox" ng-model="checked"/>
                    {{option}}
                </label>
            </li>
        </ul>
    </li>
</ul>

指令:

return {
    restrict: "E",
    templateUrl: 'scripts/directives/all-filters.html',
    link: function(scope, el, attr) {
        scope.filterTypes = dummyData.filters;
    }
}

Answer 1

通过将模型更改为 ng-model="option.checked"

，将选中的属性应用于每个选项

然后在 li 元素上更改 ng-class 指令以调用函数来检查是否选中了过滤器中的任何选项

$scope.isAnyChecked = function(filter) {
    for (var i = 0; i < filter.options.length; i++) {
        if (filter.options[i].checked) {
            return true;
        }
    }
    return false;
}

如果返回 true，则应用事件类

ng-class="isAnyChecked(filter) ? 'active' : ''"