Angularjs Modo di modifica del nome della classe su cestino NG

Question

So che è una buona pratica non usare jQuery all'interno di un'app angolare, ma lottando per elaborare il modo angolare di fare questo:

$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')
    }
}

.

My HTML:

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

.

Il codice collapsed mostra / nascondendo i pannelli e il div è all'interno di un ciclo ng-repeat, quindi nulla a che fare con la funzione clickEvent.

Speravo di poter ottenere i nomi di classe dall'oggetto eventi e modificarli senza usare jQuery.Qualche idea?

Grazie :)

Answer 1

È possibile utilizzare la Direttiva ngClass per raggiungere questo obiettivo.

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

.

Ulteriori informazioni su ngClass possono essere trovate qui .