Есть ли способ сделать выражение для чего-то вроде ngClass условным. Например, я пробовал следующее:
<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';
}
Мне просто интересно, как это должно работать ngClass. Я также создаю специальную директиву, где я хотел бы сделать что-то похожее на это. Однако я не могу найти способ смотреть выражение (и, возможно, это невозможно и причина, почему он работает так).
Вот plnkr, чтобы показать, что я имею в виду:
Ваша первая попытка была почти права, она должна работать без кавычек.
{test: obj.value1 == 'someothervalue'}
Вот plnkr.
Директива ngClass будет работать с любым выражением, которое оценивает правду или ложность, немного похожее на выражения Javascript, но с некоторыми отличиями, вы можете прочитать здесь здесь. Если ваше условие слишком сложное, вы можете использовать функцию, которая возвращает правду или ложь, как это было в вашей третьей попытке.
Просто для дополнения: вы также можете использовать логические операторы для формирования логических выражений типа
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
'
иначе, если вы хотите добавить больше классов или если у вашего класса есть дефисы или подчеркивания, это не будет работать. ng-class="{'test test-2: obj.value1 === 'value'}"
Использование 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 для строки используется другой класс.
Angular JS предоставляют эту функциональность в директиве ng-class. В котором вы можете поставить условие, а также назначить условный класс. Вы можете достичь этого двумя способами.
<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>
В этом классе кода будет применяться значение статус
если значение статус 0, тогда примените класс один
если статус - 1, тогда примените класс два
если значение статус 2, затем примените класс три
<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>
В каком классе будет применяться значение status
если статус - 1 или true, то он добавит класс test_yes
если значение статус 0 или false, то он добавит класс test_no
Я вижу большие примеры выше, но все они начинаются с фигурных скобок (json map). Другой вариант - вернуть результат, основанный на вычислении. Результатом может быть также список имен класса css (а не только карта). Пример:
ng-class="(status=='active') ? 'enabled' : 'disabled'"
или
ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"
Объяснение: Если статус активен, будет использоваться класс enabled
. В противном случае будет использоваться класс disabled
.
Список []
используется для использования нескольких классов (не только одного).
angular заключается в использовании оператора : для выполнения эквивалента модификатора if
<div ng-class="{ 'clearfix' : row%2==0 }">
добавить класс clearfix в четные строки. тем не менее выражение может быть любым, что мы можем иметь в нормальном условии if, и оно должно оцениваться как true, так и false.
Я собираюсь показать вам два метода, с помощью которых вы можете динамически применять ng-class
Используя тернарный оператор
<div ng-class="condition?'class1':'class2'"></div>
Если ваше условие истинно, тогда класс 1 будет применен к вашему элементу, тогда будет применен класс2.
Когда вы попытаетесь изменить условное значение во время выполнения, класс каким-то образом не изменится. Поэтому я предлагаю вам перейти на этап 2, если у вас есть требование, подобное динамическому изменению класса.
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
если ваше условие соответствует значению1, тогда класс1 будет применен к вашему элементу, если совпадения со значением2, тогда будет применяться класс2 и т.д. И динамическое изменение класса будет отлично работать с ним.
Надеюсь, это поможет вам.
Существует простой метод, который можно использовать с атрибутом класса html и сокращением if/else. Не нужно делать это настолько сложным. Просто используйте следующий метод.
<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your 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: '...'}
ng-class="'label-success': obj.value1 == 'Ready', 'label-warning': obj.value1 == 'On hold'}"
в кавычки:ng-class="'label-success': obj.value1 == 'Ready', 'label-warning': obj.value1 == 'On hold'}"