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

Step-1

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

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

Выход

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

Недостаток

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

Step-2

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

Выход

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

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

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

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

или

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

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

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

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

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

Тип 1

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

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

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

, если значение состояния равно 1, затем примените класс 2

, если значение состояния равно 2, затем примените класс три

Тип 2

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

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

, если значение состояния равно 1 или true, тогда он добавит класс test_yes

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

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

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

Happy Coding, Nimantha Perera

Для углового 2 используйте

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

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

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

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

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