Чи є якийсь спосіб скласти вираз для чогось на кшталт ng-classбути умовним?

Наприклад, я спробував таке:

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

Проблема з цим кодом полягає в тому, що незалежно від того, що obj.value1це таке, тест класу завжди застосовується до елемента. Робити це:

<span ng-class="{test: obj.value2}">test</span>

До тих пір, obj.value2поки не дорівнює коефіцієнт truthy, клас в не застосовується. Тепер я можу вирішити проблему на першому прикладі, зробивши це:

<span ng-class="{test: checkValue1()}">test</span>

Де checkValue1функція виглядає так:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

Мені просто цікаво, чи так ng-classце має працювати. Я також будую власну директиву, де я хотів би зробити щось подібне до цього. Однак я не можу знайти спосіб спостерігати за виразом (і, можливо, це неможливо, і причина, чому він працює так).

Ось plnkr, щоб показати, що я маю на увазі.

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

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

Ось плнкр .

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

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

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

Кутові JS забезпечують цю функціональність у директиві про ng-клас . У якому можна поставити умову, а також призначити умовний клас. Домогтися цього можна двома різними способами.

Тип 1

<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

У цьому коді клас буде застосовуватися в відповідності з величиною стану значення

якщо значення статусу дорівнює 0, застосуйте перший клас

якщо значення статусу 1, то застосуйте клас 2

якщо значення статусу 2, то застосуйте клас 3

Тип 2

<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

У якому класі буде застосовано значення статусу

якщо значення статусу дорівнює 1 або істинне, воно додасть клас test_yes

якщо значення статусу 0 або помилкове, воно додасть клас test_no

Я бачу чудові приклади вище, але всі вони починаються з фігурних дужок (карта json). Інший варіант - повернути результат на основі обчислень. Результатом може бути також список назв класів css (не лише карта). Приклад:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

або

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

Пояснення: Якщо статус активний, enabledбуде використаний клас . В іншому випадку клас disabledбуде використаний.

Список []використовується для використання декількох класів (не лише одного).

Існує простий метод, який ви можете використовувати з атрибутом та скороченням html-класу if / else. Не потрібно робити це настільки складним. Просто використовуйте наступний метод.

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

Happy Coding, Німанта Перера

Я покажу вам два методи, за допомогою яких можна динамічно застосовувати ng-клас

Крок 1

Використовуючи потрійний оператор

<div ng-class="condition?'class1':'class2'"></div>

Вихідні дані

Якщо ваша умова справжня, тоді до вашого елемента буде застосовано class1.

Недоліки

Коли ви спробуєте змінити умовне значення під час виконання, клас якось не зміниться. Тому я запропоную вам перейти на крок 2, якщо у вас є такі вимоги, як динамічна зміна класу.

Крок-2

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

Вихідні дані

якщо ваш стан відповідає значенню1, то до вашого елемента буде застосовано class1, якщо збіги зі значенням2, то буде застосовано class2 тощо. І динамічна зміна класу буде добре справлятися з цим.

Сподіваюся, що це вам допоможе.

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

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

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

Використання функції з ng-класом - хороший варіант, коли комусь доводиться виконувати складну логіку, щоб визначити відповідний клас CSS.

http://jsfiddle.net/ms403Ly8/2/

HTML:

<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>       
    </div>
</div>

CSS:

.testclass { Background: lightBlue}

JavaScript :

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

використовуй це

<div ng-class="{states}[condition]"></div>

наприклад, якщо умова є [2 == 2], стани {true: '...', false: '...'}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

Для кута 2 використовуйте це

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

ng-classє Директивою основних AngularJs. У яких ви можете використовувати "Синтаксис рядків", "Синтаксис масиву", "Оцінене вираження", "Побічний оператор" та багато інших параметрів, описаних нижче:

ngClass, використовуючи синтаксис рядків

Це найпростіший спосіб використання ngClass. Ви можете просто додати Angular змінну до ng-class, і це клас, який буде використовуватися для цього елемента.

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

Демонстраційний приклад ngClass, використовуючи синтаксис String

ngClass, використовуючи синтаксис масиву

Це схоже на метод синтаксису рядків, за винятком того, що ви можете застосувати кілька класів.

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass, використовуючи оцінене вираження

Більш просунутий метод використання ngClass (і той, який ви, мабуть, використовуватимете найбільше) - це оцінити вираз. Це працює так: якщо змінна або вираз оцінюється до true, ви можете застосувати певний клас. Якщо ні, то клас не застосовуватиметься.

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

Приклад ngClass, використовуючи оцінене вираження

ngClass, використовуючи значення

Це аналогічно методу оцінюваного вираження, за винятком того, що ви просто зможете порівняти кілька значень з єдиною змінною.

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

ngClass Використання термінального оператора

Потрійний оператор дозволяє нам використовувати стенограму, щоб вказати два різні класи: один, якщо вираз є істинним, а другий - хибним. Ось основний синтаксис для потрійного оператора:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

Оцінка першого, останнього чи конкретного числа

Якщо ви використовуєте ngRepeatдирективу , і ви хочете застосувати класи до first, lastабо певний номер в списку, ви можете використовувати спеціальні властивості ngRepeat. До них відносяться $first, $last, $even, $odd, і деякі інші. Ось приклад того, як їх використовувати.

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>