Wenden Sie ng-class auf das übergeordnete Element an, wenn auf ein Kontrollkästchen mit Angular geklickt wird?

Question

Ich habe eine Elternliste mit einem Dropdown-Kästchen, das Sie sehen können, wenn Sie auf die Liste klicken. Ich möchte die Elternlistenklasse "aktiv" geben, wenn eines der Kontrollkästchen aktiviert ist. Was jetzt passiert, ist, dass ich mehrere Listen habe. Wenn das Kontrollkästchen aktiviert ist, erhalten alle Listen diese Klasse, wenn ich nur die Liste der Kontrollkästchen haben möchte, um die "aktive" Klasse zu erhalten. Wie kann ich dies umgestalten, so dass nur die "aktive" Klasse der übergeordneten Liste zugewiesen wird, nicht alle Listen?

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> 

Richtlinie:

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

Answer 1

die geprüfte Eigenschaft auf jede Option Nehmen durch das Modell ng-model="option.checked"

Dann auf dem li Element der Wechsel ändern ng-class Direktive zum Aufrufen eines Funktion zu überprüfen, ob eine Option innerhalb des Filters geprüft

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

dann die aktive Klasse gelten, wenn es liefert true

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

Answer 2

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