it-roy-ru.com

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 , чтобы показать, что я имею в виду.

476
ryanzec

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

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

Вот это plnkr .

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

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

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

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

216
Abhi

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

Тип 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>

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

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

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

103
Kaushal Khamar

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

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

или же

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

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

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

64
AlikElzin-kilaka

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

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

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

44
Nimantha Harshana Perera

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

Шаг 1

С помощью троичного оператора

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

Результат

Если ваше условие истинно, то class1 будет применен к вашему элементу, иначе будет применен class2.

Недостаток

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

Шаг 2

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

Результат

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

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

35
Subhransu

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

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

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

34
aamir sajjad

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

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

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

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

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

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

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