AngularJS Möglichkeit, den Klassennamen beim ng-Klick zu ändern

Question

Ich weiß, dass es eine gute Übung ist, jQuery nicht in einer AngularJS-App zu verwenden, sondern Schwierigkeiten zu haben, die AngularJS-Methode dafür zu finden:

$scope.clickEvent = function(event) {
    if($(event.target).hasClass('icon-closed')) {
        $(event.target).removeClass('icon-closed')
        $(event.target).addClass('icon-opened')
    } else {
        $(event.target).removeClass('icon-opened')
        $(event.target).addClass('icon-closed')
    }
}

Mein HTML:

<div class="component-title icon-closed" 
     ng-model="collapsed" 
     ng-click="collapsed=!collapsed;clickEvent($event)">{{component.name}}</div>

Der collapsed code zeigt / versteckt Bedienfelder und das Div befindet sich in einem ng-repeat schleife, also nichts mit dem zu tun clickEvent Funktion.

Ich hatte gehofft, ich könnte die Klassennamen aus dem Ereignisobjekt abrufen und sie ändern, ohne jQuery zu verwenden.Irgendwelche Ideen?

Dank :)

Answer 1

Sie können das verwenden ngClass richtlinie, um dies zu erreichen.

<div class="component-title"
     ng-class="{'icon-closed':collapsed,'icon-opened':!collapsed}"
     ng-model="collapsed"
     ng-click="collapsed=!collapsed">{{component.name}}</div>

Mehr Informationen über ngClass kann gefunden werden hier.