Использование тернарного оператора в HTML для определения класса, который будет реализован

Question

Использование тернарного оператора в HTML для определения класса, который будет реализован

0

Я хочу динамически выбирать класс CSS с использованием тернарного оператора в HTML. Я использую следующий код, но, похоже, условие вообще не оценивается. Какой бы класс не был написан в истинной части условия, применяется. Как я могу применить конкретный класс на основе некоторого условия? Любой альтернативный подход тоже будет полезен.

<td class="col-md-6"><span class="form-control-static cdr-details-td" />
  <span class="(('1' === '-1') ? version-modal-header : failure)">{{cdr.causeCode}}</span> 
</td>

CSS для этого же:

.version-modal-header {
  background-color: #000000;
}
.failure {
  color: #ff0000;
  font-weight: bold;
}

Natty 07 июнь 2016, в 07:10

Источник

Теги:

javascript

html

angularjs

css

4 ответа

3

Пожалуйста, проверьте рабочий пример здесь: Пример

Использовать ng-class

 ng-class="{true: 'version-modal-header', false: 'failure'}[changeClass]"

Вы можете написать свои условия в [changeClass]

User2 07 июнь 2016, в 05:06

1

Не знал об этом синтаксисе. Выглядит круто
Phil 07 июнь 2016, в 07:03
0

@ User2 Это была отличная дополнительная информация. Очищены также несколько концепций. Благодарю.
Natty 07 июнь 2016, в 16:06

0

Тройная операция, которую вы включили в вашу программу, не работает для class или для конкретного - HTML DOM. Это можно сделать с помощью AngularJS, поскольку он обеспечивает замечательную встроенную directive известную как ng-class. С помощью этого можно установить условия, на основе которых нужно применить class.

Посмотрите на фрагмент ниже:

<td class="col-md-6"><span class="form-control-static cdr-details-td" />
    <span ng-class="{'version-modal-header': '1' === '-1', 'failure': '1' === '1'}">{{cdr.causeCode}}</span>
</td>

Ознакомьтесь с демо здесь.

Shashank 07 июнь 2016, в 03:13

0

Спасибо @Shashank. Это было полезно.
Natty 07 июнь 2016, в 16:09

0

Используйте ng-class если вы хотите применить класс css динамически. не используйте интерполяцию или привязку {{}}, чтобы применить класс css напрямую, так как он не будет работать в браузерах. В ng-class вам просто нужно указать объект, содержащий имена классов в качестве ключей, и соответствующее логическое условие в качестве значений. Любой класс, значение которого имеет значение true, применяется динамически.

<td class="col-md-6"><span class="form-control-static cdr-details-td" />
  <span ng-class="{'version-modal-header':('1' === '-1') , 'failure': ('1' !== '-1')}">{{cdr.causeCode}}</span> 
</td>

https://docs.angularjs.org/api/ng/directive/ngClass

Rahul Malu 07 июнь 2016, в 03:12

Ещё вопросы

Не знал об этом синтаксисе. Выглядит круто
@ User2 Это была отличная дополнительная информация. Очищены также несколько концепций. Благодарю.

Phil · Accepted Answer · 2016-06-07T03-20-00.000Z

Вместо этого используйте ng-class

ng-class="{'version-modal-header': condition, 'failure': !condition}"

Вы также можете использовать тройной, если хотите

ng-class="condition ? 'version-modal-header' : 'failure'"

Спасибо, я смог сделать это с помощью троичного оператора. У меня было готовое условие, просто пришлось заменить класс на ng-class.
ng-class с троичным оператором действительно делает работу простой. Отличный кодекс Фил!