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