Динамический класс в Angular.js

Я хочу динамически добавлять класс css в элемент <li>, который я зацикливаю. Цикл выглядит так:

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

В моей модели todo у меня есть приоритет свойства, который может быть "срочным", "не столь важным" или "нормальным", и я просто хочу назначить класс для каждого элемента.

Я знаю, что могу сделать это для логического с чем-то вроде ng-class="{'urgent': todo.urgent}" Но моя переменная не является логической, но имеет три значения. Как мне это сделать? Также обратите внимание, что я не хочу использовать ng-style="...", так как мой класс изменит несколько визуальных объектов.

Ответ 1

Вы можете просто назначить функцию как выражение и вернуть из нее правильный класс. Изменить: есть также лучшее решение для динамических классов. См. Примечание ниже.

Фрагмент из представления:

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

и в контроллере:

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

Лучший способ сделать это

Недавно я узнал о другом подходе. Вы передаете объект, который имеет свойства, соответствующие классам, на которых вы работаете, и значения представляют собой выражения или логические переменные. Простой пример:

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

В этом случае класс active будет добавлен к элементу, если user.id соответствует activeId из объекта $scope!

Ответ 2

Если вы просто хотите добавить класс, используйте атрибут class с интерполяцией:

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

Ответ 3

Вы почти получили его:)
Он должен быть без разметки интерполяции ({{ и }}):

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