Ответ 1

Ваша первая попытка была почти права, она должна работать без кавычек.

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

Вот plnkr.

Директива ngClass будет работать с любым выражением, которое оценивает правду или ложность, немного похожее на выражения Javascript, но с некоторыми отличиями, вы можете прочитать здесь здесь. Если ваше условие слишком сложное, вы можете использовать функцию, которая возвращает правду или ложь, как это было в вашей третьей попытке.

Просто для дополнения: вы также можете использовать логические операторы для формирования логических выражений типа

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

Ответ 2

Использование ng-класса внутри ng-repeat

<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 для строки используется другой класс.

Ответ 3

Angular JS предоставляют эту функциональность в директиве ng-class. В котором вы можете поставить условие, а также назначить условный класс. Вы можете достичь этого двумя способами.

Тип 1

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

В этом классе кода будет применяться значение статус

если значение статус 0, тогда примените класс один

если статус - 1, тогда примените класс два

если значение статус 2, затем примените класс три

Тип 2

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

В каком классе будет применяться значение status

если статус - 1 или true, то он добавит класс test_yes

если значение статус 0 или false, то он добавит класс test_no

Ответ 4

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

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

или

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

Объяснение: Если статус активен, будет использоваться класс enabled. В противном случае будет использоваться класс disabled.

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

Ответ 5

Существует простой метод, который можно использовать с атрибутом класса html и сокращением if/else. Не нужно делать это настолько сложным. Просто используйте следующий метод.

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

Счастливое кодирование, Ниманта Перера

Ответ 6

Я собираюсь показать вам два метода, с помощью которых вы можете динамически применять ng-class

Шаг 1

Используя тернарный оператор

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

Выход

Если ваше условие истинно, тогда класс 1 будет применен к вашему элементу, тогда будет применен класс2.

Неудобство

Когда вы попытаетесь изменить условное значение во время выполнения, класс каким-то образом не изменится. Поэтому я предлагаю вам перейти на этап 2, если у вас есть требование, подобное динамическому изменению класса.

Шаг 2

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

Выход

если ваше условие соответствует значению1, тогда класс1 будет применен к вашему элементу, если совпадения со значением2, тогда будет применяться класс2 и т.д. И динамическое изменение класса будет отлично работать с ним.

Надеюсь, это поможет вам.

Ответ 7

Угловой синтаксис заключается в использовании оператора : для выполнения эквивалента модификатора if

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

Добавьте класс clearfix к четным строкам. Тем не менее, выражение может быть любым, что мы можем иметь в нормальном условии, если оно есть, и оно должно оцениваться как истинное или ложное.

Ответ 8

Использование функции с 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 ";
  }     
}

Ответ 9

использовать этот

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

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

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

Ответ 10

Для Angular 2 используйте это

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

Ответ 11

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 с использованием строкового синтаксиса

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 Использование тернарного оператора

Тернарный оператор позволяет нам использовать сокращение для указания двух разных классов: один для выражения true и один для false. Вот основной синтаксис для троичного оператора:

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>