I am working on a parent list with a dropdown of checkboxes that only shows when you click on the list. Currently, all lists receive the class "active" if any checkbox in any list is checked. However, I want to change this behavior so that only the list containing the checked checkboxes gets the "active" class. How can I modify the code to achieve this?
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>
Directive:
return {
restrict: "E",
templateUrl: 'scripts/directives/all-filters.html',
link: function(scope, el, attr) {
scope.filterTypes = dummyData.filters;
}
}