Возможно ли иметь несколько отдельных тернарных выражений в ng-классе для элемента?

Я пытаюсь объединить следующие два тернарных выражения ng-class в один ng-class (поэтому я могу контролировать цвет, через классы btn-success/danger и ширину, через width-small/medium/wide класс, моей кнопки divs

<div class="btn" ng-class="(rate > 0) ? 'btn-success' : 'btn-danger'">{{rate}}</div>
<div class="btn" ng-class="(priority == 'low') ? 'width-small' : (priority == 'medium') ? 'width-medium' : 'width-wide'">{{rate}}</div>

Я понимаю, что могу просто что-то делать по строкам ниже; однако я хотел бы использовать тернарные выражения, доступные в 1.1.5

<div class="btn" ng-class="{'btn-success': rate > 0, 'btn-danger': rate <= 0, 'width-small': priority == 'low', 'width-medium': priority == 'medium', 'width-wide': prioity == 'high'}">{{rate}}</div>

Пространство, разделяющее выражения, не работало для меня, а также не разделяло запятую внутри ng-class

Спасибо заранее за помощь в определении того, как и как иметь несколько тернарных выражений в одном ng-class

ОТВЕТЫ

Ответ 1

Для тех, кто ищет ответ: Да, это действительно возможно, также как упоминалось, читаемость сомнительна.

<div ng-class="(conversation.read ? 'read' : 'unread') + ' ' + (conversation.incoming ? 'in' : 'out')"></div>

Из документации ngClass:

Директива работает по-разному, в зависимости от того, из какого из трех типов выражение выражается:

  • Если выражение оценивается как строка, строка должна быть одним или > большим количеством имен разделенных пробелами.

  • Если выражение оценивает массив, каждый элемент массивa > должен > быть строкой, которая представляет собой одно или несколько имен классов с разделителями по размеру.

  • Если выражение оценивает объект, то для каждой пары "ключ-значение" > объекта с истинным значением соответствующий ключ используется как имя класса.

Здесь применим вариант 1.

Из моего понимания, используя этот метод, вы получите 2 часа, в то время как использование нотации объектов приведет к 4, но я могу ошибаться в этом.

Ответ 2

Я думаю, вы предпочли бы использовать filter. Вы можете написать фильтр rateToClass, который будет содержать логику и преобразовать вашу скорость в имени класса, которое вы хотите.

Вы также можете поместить функцию rateToClass (rate) в свою область действия, но она уродлива.

Если вы настаиваете на своей логике в представлении, ng-class поддерживать несколько классов с помощью объекта (см. официальный пример официального документа, строка 7):

<p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p>

У вас может быть более сложное выражение, например ng-class='{btn-success: rate > 0} '.

Ответ 3

Можно добавить несколько троичных выражений в одну директиву ng-класса, поместив каждое из выражений в массив как элементы этого массива.

Пример:

<div ng-class="[
    expression1 ? 'class1' : 'class2',
    expression2 ? 'class3' : 'class4'
]">

Ответ 4

Если вы используете более раннюю версию Angular, ваши два варианта:

(условие & result_if_true ||! условие && result_if_false) {true: 'result_if_true', false: 'result_if_false'} [условие] Элемент 2. выше создает объект с двумя свойствами. Синтаксис массива используется для выбора свойства с именем true или с именем с именем false и возвратом связанного значения.

например.

...  или ... $ first устанавливается в true внутри ng-repeat для первого элемента, поэтому выше будет применяться класс 'myClass1' и 'myClass2' только в первый раз через цикл.

С ng-классом существует более простой способ: ng-класс принимает выражение, которое должно оцениваться одним из следующих:

строка имен классов с разделителями пространства массив имен классов map/object имен классов для булевых значений. Пример 1) был приведен выше. Вот пример из 3, который, по моему мнению, читается намного лучше:

... В первый раз через цикл ng-repeat добавлен класс myClass. 3-й раз (значение $index начинается с 0), добавляется класс anotherClass.

ng-style принимает выражение, которое должно оценивать к карте/объекту имен стиля CSS в значениях CSS. Например.

...