Question

我有一个父列表，其中包含一个复选框下拉列表，如果单击列表，则可以看到这些复选框。我想要做的是给父母列表类＆＃34;活跃＆＃34;如果选中任何复选框。现在发生的事情是我有多个列表，所以如果选中复选框，当我只想要列表中的复选框时，所有列表都将获得该类，以获得＆＃34;活动＆＃34;类。我怎样才能重构这一点，只有＆＃34;活跃＆＃34; class被赋予父列表，而不是所有列表？

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"

，将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' : ''"

Answer 2

<input ng-model='checked' ng-change='filter.checked=checked'/>

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

2 个答案: