mardi 5 avril 2016

Apply ng-class to parent element if any checkbox is clicked using Angular?

I have a parent list with a dropdown of checkboxes that you can see if you click on the list. What I want to do is give the parent list class "active" if any of the checkboxes are checked. What's happening now is that I have multiple lists so if the checkbox is checked all lists will get that class when I only want the list the checkboxes are in to get the "active" class. How can I refactor this so only the "active" class is given to the parent list, not all lists?

HTML:

<ul ng-repeat="type in filterTypes">
    <li ng-repeat="filter in type.filters" ng-click="selectFilter(filter)" ng-class="{active:checked}">{{filter.value | uppercase}}
        <ul ng-show="(filter.active)">
            <li ng-repeat="option in filter.options">
                <label>
                    <input type="checkbox" ng-model="checked" ng-change="checkFilter(checked)"/>
                    {{option}}
                </label>
            </li>
        </ul>
    </li>
</ul>

Directive:

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

        scope.filterTypes = dummyData.filters;

        scope.selectFilter = function(filterChosen){            
            filterChosen.active ? filterChosen.active = false : filterChosen.active = true;         
        };

        scope.checkFilter = function(checked){
            scope.checked = checked;
        };
    }
}




Aucun commentaire:

Enregistrer un commentaire