Вы не можете передать несколько классов, таких как ng-class = "{'class1 class2': expression1}", просто протестируйте это и не сработало вообще, решение, как @CodeHater сказал: «Применять несколько классов, когда выражение содержит true:», что хитрость
d1jhoni1b
9
В 1.2.16 опция multi-class ( 'class1 class2': expression), кажется, работает нормально, за исключением того, что если вы повторно используете класс, он отбрасывается, когда выражение переключается между опциями. Например, с 'commonClass class1': expression == true, 'commonClass class2': expression == falseCommonClass теряется, так как выражение переключается между истиной и ложью.
BrianS
10
@BrianS Я бы сделал что-то вроде этого:class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}
AlwaysALearner
@CodeHater спасибо. Это в значительной степени то, что я планирую сейчас, просто нужно уделить время, чтобы исправить CSS.
Этот не работает для меня. <span ng-class = "params.isAdmin? 'fa fa-lock fa-2x': 'fa fa-unlock fa-2x'"> </ span>. Консоль выдаст ошибку.
TommyQu
Используя этот метод, я могу добавить другое выражение?
Поход Налбандян
6
@HikeNalbandyan да, вы можете добавить еще одно выражение:ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"
mahi-man
47
Да, вы можете иметь несколько выражений для добавления нескольких классов в ng-class.
Например:
<divng-class="{class1:Result.length==2,class2:Result.length==3}"> Dummy Data </div>
Блестящий ответ! Я всегда использовал функции для более сложных ng-classдиректив, например, когда мне нужно было применить троичное и стандартное выражение к одному и тому же элементу. Я внес изменение в принятый ответ, чтобы включить использование массивов выражений.
Даниэль Боннелл
Я не специалист по Angular, но кажется, что эта конструкция [{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]может упрощаться, как это ['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]. Я только что попробовал это в Angular 1.5.9, и это работает :) Спасибо за отличный ответ!
vadipp
31
Используя $scopeметод контроллера, вы можете рассчитать, какие классы выводить в представлении. Это особенно удобно, если у вас есть сложная логика для вычисления имен классов, и это уменьшит количество логики в вашем представлении, перемещая ее в контроллер:
Если класс изменяется после рендера, ng-class все еще ожидает изменения в className?
повтор
3
ИМХО, сфера должна только выставлять условие . Должно быть до HTML- ng-привязок, чтобы определить, какой класс использовать при выполнении этого условия.
Альнитак
1
Это перезаписывает атрибут класса в элементах dom. Если кто-то использует это, он должен включить классы, которым не нужны условия, в возвращаемое className.
Phuwin
21
Ваш пример работает для условных классов (имя класса будет отображаться, если expressionDataXtrue):
<script>
angular.module('myapp',[]).controller('ExampleController',['$scope',function($scope){
$scope.MyColors=['It is Red','It is Yellow','It is Blue','It is Green','It is Gray'];
$scope.getClass =function(strValue){if(strValue ==("It is Red"))return"Red";elseif(strValue ==("It is Yellow"))return"Yellow";elseif(strValue ==("It is Blue"))return"Blue";elseif(strValue ==("It is Green"))return"Green";elseif(strValue ==("It is Gray"))return"Gray";}}]);</script>
Используй это
<bodyng-app="myapp"ng-controller="ExampleController"><h2>AngularJS ng-class if example</h2><ul><ling-repeat="icolor in MyColors"><png-class="[getClass(icolor), 'b']">{{icolor}}</p></li></ul>
Ответы:
Применять разные классы, когда разные выражения оцениваются
true
:Чтобы применить несколько классов, когда выражение верно:
или просто:
Обратите внимание на одинарные кавычки, окружающие классы CSS.
источник
'class1 class2': expression
), кажется, работает нормально, за исключением того, что если вы повторно используете класс, он отбрасывается, когда выражение переключается между опциями. Например, с'commonClass class1': expression == true, 'commonClass class2': expression == false
CommonClass теряется, так как выражение переключается между истиной и ложью.class="commonClass" ng-class={'class1' : expression, 'class2' : !expression}
ng-class="{'class1' : expression1, 'class2':expression1 }"
Возможно ли ? Не могли бы вы посмотреть на мой вопрос: stackoverflow.com/questions/25391692/…Для обозначения троичного оператора:
источник
ng-class="[expression1? 'class1 class2' : 'class3 class4', expression2 ? 'class5' : 'class6']"
Да, вы можете иметь несколько выражений для добавления нескольких классов в ng-class.
Например:
источник
Невероятно мощная альтернатива другим ответам здесь:
Некоторые примеры:
1. Просто добавляет 'class1 class2 class3' в div:
2. Добавляет «нечетные» или «четные» классы в div в зависимости от индекса $:
3. Динамически создает класс для каждого div на основе $ index
Если
$index=5
это приведет к:Вот пример кода, который вы можете запустить:
источник
ng-class
директив, например, когда мне нужно было применить троичное и стандартное выражение к одному и тому же элементу. Я внес изменение в принятый ответ, чтобы включить использование массивов выражений.[{true:'index'+$index}[true], {0:'even', 1:'odd'}[ $index % 2 ]]
может упрощаться, как это['index'+$index, {0:'even', 1:'odd'}[ $index % 2 ]]
. Я только что попробовал это в Angular 1.5.9, и это работает :) Спасибо за отличный ответ!Используя
$scope
метод контроллера, вы можете рассчитать, какие классы выводить в представлении. Это особенно удобно, если у вас есть сложная логика для вычисления имен классов, и это уменьшит количество логики в вашем представлении, перемещая ее в контроллер:и в представлении, просто:
источник
className
?ng-
привязок, чтобы определить, какой класс использовать при выполнении этого условия.className
.Ваш пример работает для условных классов (имя класса будет отображаться, если
expressionDataX
true):<div ng-class="{class1: expressionData1, class2: expressionData2}"></div>
Вы также можете добавить несколько классов, предоставленных пользователем элемента:
<div ng-class="[class1, class2]"></div>
Применение:
<div class="foo bar" class1="foo" class2="bar"></div>
источник
{}
и класс с привязкой к данным[]
?ngClass
директивы на элемент.<a href="#/u/[[msg.from]]" ng-bind="msg.from" class="name, ng-class:[users[msg.from].nice, users[msg.from].star];" ng-class="{premium: users[msg.from].premium}"></a>
и больше: scotch.io/tutorials/javascript/the-many-ways-to-use-ngclassВот пример сравнения нескольких состояний angular-ui-router с использованием OR || оператор:
Это выдаст ли классам предупреждение и / или активным, в зависимости от того, выполнены ли условия.
источник
Ниже active и activemenu находятся классы, а itemCount и ShowCart это выражения / логические значения.
источник
С несколькими условиями
источник
Нашел другой способ благодаря Scotch.io
Это была моя ссылка. ДОРОЖКА
источник
Другим способом мы можем создать функцию для управления «использованием нескольких классов»
CSS
скрипт
Используй это
Вы можете обратиться к полной кодовой странице в ng-классе, если пример
источник