AngularJS ngClass умовний

Чи можна якось зробити так, щоб вираз на кшталт 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, щоб показати, що я маю на увазі.

daaawx
Edited question 29-го березня 2019 в 7:18
Програмування
html css angularjs
13-го травня 2013 в 7:38
10 погляди
Рішення

Ваша перша спроба була майже правильною, вона повинна працювати без лапок.

{test: obj.value1 == 'someothervalue'}

Ось plnkr.

Директива ngClass буде працювати з будь-яким виразом, який оцінює істинність або хибність, трохи схоже на вирази Javascript, але з деякими відмінностями, про це можна почитати тут. Якщо ваша умова занадто складна, то ви можете використовувати функцію, яка повертає true або false, як ви зробили у вашій третій спробі.

Просто для доповнення: Ви також можете використовувати логічні оператори для формування логічних виразів типу

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Bertrand
Edited answer 2-го липня 2015 в 1:17
Коментарі (5)

Використання 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 використовується окремий клас для рядка.

JakeGould
Edited answer 5-го квітня 2016 в 2:52
Коментарі (2)

Кутовий синтаксис полягає у використанні оператора : для виконання еквіваленту модифікатора if

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

Додайте клас clearfix до парних рядків. Тим не менш, вираз може бути будь-яким, який ми можемо мати у звичайній умові if, і він повинен оцінюватися як істина або хибність.

Tristan
Edited answer 13-го серпня 2018 в 9:03
Коментарі (1)