Чи можна якось зробити так, щоб вираз на кшталт ng-class
був умовним?
Наприклад, я спробував наступне:
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>
Проблема з цим кодом полягає в тому, що незалежно від того, яким є obj.value1
, до елементу завжди застосовується перевірка класу. Робимо так:
<span ng-class="{test: obj.value2}">test</span>
Поки obj.value2
не дорівнює правдивому значенню, клас не застосовується. Тепер я можу обійти проблему у першому прикладі, зробивши так:
<span ng-class="{test: checkValue1()}">test</span>
Де функція checkValue1
виглядає так:
$scope.checkValue1 = function() {
return $scope.obj.value === 'somevalue';
}
Мені просто цікаво, чи так повинен працювати ng-class
. Я також створюю користувацьку директиву, де я хотів би зробити щось подібне до цього. Однак я не можу знайти спосіб переглянути вираз (а можливо, це неможливо і є причиною того, що він працює саме так).
Ось plnkr, щоб показати, що я маю на увазі.
Ваша перша спроба була майже правильною, вона повинна працювати без лапок.
{test: obj.value1 == 'someothervalue'}
Ось plnkr.
Директива ngClass буде працювати з будь-яким виразом, який оцінює істинність або хибність, трохи схоже на вирази Javascript, але з деякими відмінностями, про це можна почитати тут. Якщо ваша умова занадто складна, то ви можете використовувати функцію, яка повертає true або false, як ви зробили у вашій третій спробі.
Просто для доповнення: Ви також можете використовувати логічні оператори для формування логічних виразів типу
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Використання ng-класу всередині ng-повтору
<table>
<tbody>
<tr ng-repeat="task in todos"
ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
<td>{{$index + 1}}</td>
<td>{{task.name}}</td>
<td>{{task.date|date:'yyyy-MM-dd'}}</td>
<td>{{task.status}}</td>
</tr>
</tbody>
</table>
Для кожного статусу в task.status використовується окремий клас для рядка.
Кутовий синтаксис полягає у використанні оператора : для виконання еквіваленту модифікатора if
<div ng-class="{ 'clearfix' : (row % 2) == 0 }">
Додайте клас clearfix до парних рядків. Тим не менш, вираз може бути будь-яким, який ми можемо мати у звичайній умові if, і він повинен оцінюватися як істина або хибність.