else - ng-class if

Clase dinámica en Angular.js

Question

Quiero agregar dinámicamente una clase css a un elemento <li> que estoy haciendo un bucle. El ciclo es así:

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

En mi modelo de tareas pendientes, tengo la prioridad de propiedad que puede ser "urgente", "no tan importante" o "normal" y solo quiero asignar la clase para cada elemento.

Sé que puedo hacer esto para un booleano con algo como ng-class="{''urgent'': todo.urgent}" Pero mi variable no es booleana, pero tiene tres valores. ¿Cómo haría esto? Tenga en cuenta también que no quiero usar ng-style="..." ya que mi clase alterará varias cosas visuales.

Answer 1

Casi lo tienes :)
Debería estar sin marcado de interpolación ( {{ y }} ):

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

Answer 2

Si solo desea agregar una clase, use el atributo de class con interpolación:

class="priority-is-{{todo.priority}}"

Answer 3

Simplemente puede asignar una función como expresión y devolver la clase adecuada desde allí. Editar: también hay una mejor solución para las clases dinámicas. Por favor, mira la nota a continuación.

Fragmento de la vista:

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

y en el controlador:

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

Mejor forma de hacer esto

Recientemente aprendí sobre otro enfoque. Usted pasa un objeto que tiene propiedades correspondientes a las clases en las que opera, y los valores son expresiones o variables booleanas. Un simple ejemplo:

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

En este caso, active clase active se agregará al elemento siempre que user.id coincida con activeId desde el objeto $scope .