w3school - ngclass with class




Classe dinamica in Angular.js (2)

Hai quasi capito :)
Dovrebbe essere senza markup di interpolazione ( {{ e }} ):

<li ng-repeat="todo in todos" ng-class="todo.priority">
...

Voglio aggiungere dinamicamente una classe css a un elemento <li> cui sto girando. Il ciclo è come questo:

<li ng-repeat="todo in todos" ng-class="{{todo.priority}}">
  <a href="#/todos/{{todo.id}}">{{todo.title}}</a>
  <p>{{todo.description}}</p>
</li>

Nel mio modello di lavoro, ho la priorità di proprietà che può essere "urgente", "non così importante" o "normale" e voglio solo assegnare la classe per ogni elemento.

So che posso farlo per un booleano con qualcosa come ng-class="{'urgent': todo.urgent}" Ma la mia variabile non è un booleano, ma ha tre valori. Come lo farei? Nota anche che non voglio usare ng-style="..." dato che la mia classe modificherà diverse cose visive.


Puoi semplicemente assegnare una funzione come espressione e restituire la classe appropriata da lì. Modifica: esiste anche una soluzione migliore per le classi dinamiche. Si prega di consultare la nota di seguito.

Snippet dalla vista:

<div ng-class="appliedClass(myObj)">...</div>

e nel controller:

$scope.appliedClass = function(myObj) {
    if (myObj.someValue === "highPriority") {
        return "special-css-class";
    } else {
        return "default-class"; // Or even "", which won't add any additional classes to the element
    }
}

Un modo migliore per farlo

Di recente ho imparato a conoscere un altro approccio. Si passa in un oggetto che ha proprietà corrispondenti alle classi su cui si opera e i valori sono espressioni o variabili booleane. Un semplice esempio:

ng-class="{ active: user.id == activeId }"

In questo caso la classe active verrà aggiunta all'elemento fintanto che user.id corrisponde a activeId dall'oggetto $scope !





angularjs