Я хочу динамически выбирать класс 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;
}
Вместо этого используйте ng-class
ng-class="{'version-modal-header': condition, 'failure': !condition}"
Вы также можете использовать тройной, если хотите
ng-class="condition ? 'version-modal-header' : 'failure'"
Пожалуйста, проверьте рабочий пример здесь: Пример
Использовать ng-class
ng-class="{true: 'version-modal-header', false: 'failure'}[changeClass]"
Вы можете написать свои условия в [changeClass]
Тройная операция, которую вы включили в вашу программу, не работает для 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>
Ознакомьтесь с демо здесь.
Используйте 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>
ng-class
с троичным оператором действительно делает работу простой. Отличный кодекс Фил!