AngularJS ngClass условный


499

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


Посмотрите на этот ответ: stackoverflow.com/questions/14788652/…
Adrian Neatu

43
Классы с тире должны быть указаны:ng-class="'label-success': obj.value1 == 'Ready', 'label-warning': obj.value1 == 'On hold'}"
Брент Уошборн

2
Мы можем использовать больше условий с ng-классом, см. В этом блоге goo.gl/qfEQZw
virender


"Классам с тире нужны ресницы '' '' '' '"
Ричард

Ответы:


596

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

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

Вот плнкр .

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

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

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

2
Спасибо, по какой-то причине, я подумал, что, поскольку это было выражение в качестве значения объекта, все это должно быть в кавычках.
ryanzec

8
оберните имя класса в 'противном случае, если вы хотите добавить больше классов или если у вашего класса есть дефисы или подчеркивания, они не будут работать. ng-class="{'test test-2: obj.value1 === 'value'}"
Андреа Турри

6
@ Андреа, ты забыл заключительную цитату: ng-class="{'test test-2': obj.value1 === 'value'}"
ErikE

Для Angular2 (который я пытался найти) атрибут использования (ы) , как: [class.test]="obj.value1 == 'someotervalue'".
kub1x

К вашему сведению, вы также можете иметь скобки. ng-class="{danger:!enabled || (type === 'WHEEL' && !isOnline) }
daCoda

227

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


Прекрасный пример с несколькими классами, спасибо!
Срикант Карини

112

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 или true, тогда добавится класс test_yes

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


1
что здесь за статус?
CommonSenseCode

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

4
Подобно этому, поскольку он более гибок и менее безумен при работе с несколькими ценностями
Эдуардо Ла Хоз Миранда

Как насчет использования его для нескольких классов. Например, <div ng-class = "{0: 'one', 1: 'two', 2: 'three'} [status], {0: 'one', 1: 'two'} [status1]"> </ div>
parth.hirpara

1
Можем ли мы использовать это в таком случае, как: <div ng-class="{'Image' || 'image': 'image-icon', 'Video' || 'video' || 'aVideo' || 'bVideo' : 'video-icon'}[resource.type]"></div>
Чандра Кант Паливал

80

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

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

или

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

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

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


1
Прекрасно, все потрясающие примеры, но мне нравится ваш больше всего!
stormec56

48

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

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

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


2
Этот парень понимает это. Спасибо,
приятель

36

Я собираюсь показать вам два метода, с помощью которых вы можете динамически применять 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 и так далее. И динамическое изменение класса будет хорошо работать с ним.

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


36

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

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

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


1
Ницца! Также внутри ng-repeat вы можете использовать $ даже для установки класса. Например, ng-class = "$ even? 'Even': 'odd'". Другими изящными значениями bool внутри ng-repeat являются $ first, $ last, $ четный, $ нечетный ...
Макс

15

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

2
Я думаю, что это смешивает проблемы. Контроллер должен быть более абстрактным и заботиться не о классах CSS, а о состоянии. На основе состояния классы CSS должны применяться в шаблоне. Таким образом, контроллер не зависит от шаблона и его можно использовать повторно.
Юбер Гжесковяк,

9

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

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

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

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

но если у меня 3 или более условий, это не сработает? так как это вернет только истинные и ложные условия
Али Аль Амин

условия означает истина или ложь. Вы имеете в виду что-то с более чем 2 значениями? @AlyAlAmeen
Саид

7

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

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

Чтобы расширить это, для Angular 2 вы применяете класс, а также модификатор класса в условном выражении if / else, используя массив, подобный так:[ngClass]="['base-class', thread.isActive ? 'base-class--active' : '']"
Matt Rabe

5

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>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.