Есть ли способ сделать выражение для чего-то вроде 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, чтобы показать, что я имею в виду.
Ваша первая попытка была почти правильной, Она должна работать без кавычек.
{test: obj.value1 == 'someothervalue'}
Вот plnkr.
Директива ngClass будет работать с любым выражением, которое оценивается как истинное или ложное, что немного похоже на выражения Javascript, но имеет некоторые отличия, о которых вы можете прочитать здесь. Если ваше условие слишком сложное, то вы можете использовать функцию, которая возвращает истинность или ложность, как вы сделали в третьей попытке.
Просто чтобы дополнить: Вы также можете использовать логические операторы для формирования логических выражений типа
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Использование ng-class внутри 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 обеспечить эту функциональность в НГ-класса Директивы. В которые вы можете поставить условие, а также назначить условное класса. Этого можно добиться двумя разными способами.
<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>
В какой класс будет применять стоимости состояние
если состояние стоимость 1 или True затем он будет добавить класс test_yes
если статус ** значения 0 или false затем он будет добавить класс test_no**
Я вижу много примеров, но все они начинаются с фигурной скобки (JSON на карте). Другой вариант-возвращать результаты, основанные на расчете. Результат также может быть список имен классов CSS (не только карты). Пример:
ng-class="(status=='active') ? 'enabled' : 'disabled'"
или
ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"
Объяснение: если статус активный класс "включено" будет использоваться. В противном случае класс "отключено" будет использоваться.
Список []
используется для работы с несколькими классами (не только один).
Есть простой метод, который можно использовать с HTML атрибут class и стенографировать, если, иначе. Нет необходимости, чтобы сделать его настолько сложным. Просто используйте следующий метод.
<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>
Удачи В Кодировании, Nimantha Перера
Синтаксис Angular предполагает использование оператора : для выполнения эквивалента модификатора if.
<div ng-class="{ 'clearfix' : (row % 2) == 0 }">
Добавьте класс clearfix к четным строкам. Тем не менее, выражение может быть любым, что мы можем иметь в обычном условии if, и оно должно оцениваться либо как true, либо как false.
Я собираюсь показать вам два способа, с помощью которых вы можете динамически применить НГ-класса
С помощью тернарного оператора
<div ng-class="condition?'class1':'class2'"></div>
Если условие истинно, то класс1 будут применены к элементу другого класс2 будет применяться.
Когда вы будете пытаться изменить условное значение во время выполнения классом как-то не изменилось. Поэтому я предлагаю вам перейти на Шаг 2, Если у вас есть потребность как динамическое изменение класса.
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
если ваше состояние совпадает с значение1 тогда класс1 будут применены к элементу, если матчи с значение2 тогда класс2 будет применяться и так далее. И динамическая смена класса будет работать нормально.
Надеюсь, что это поможет вам.
Используя функцию с НГ-класса-это хороший вариант, когда кто-то должен выполнить сложную логику, чтобы решить соответствующий класс CSS.
HTML-код:
<div ng-app>
<div ng-controller="testCtrl">
<div ng-class="getCSSClass()">Testing ng-class using function</div>
</div>
</div>
Усс:
.testclass { Background: lightBlue}
Язык JavaScript:
function testCtrl($scope) {
$scope.getCSSClass = function() {
return "testclass ";
}
}
используйте это
<div ng-class="{states}[condition]"></div>
например, если условие [2 == 2], государства {правда: '...', ложные: '...'}
<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>
Для угловой 2, Используйте это
<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>
НГ-класс
- это директива из основных в AngularJS. В которые вы можете вставлять "синтаксис строки и", то "массива синтаксис" и "Ну вычисляемое выражение, что", то " тернарный оператор" и многие другие опции, описанные ниже:
Это самый простой способ использовать ngClass. Вы можете просто добавить угловой переменной НГ-класс и это класс, который будет использоваться для этого элемента.
<!-- 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, используя синтаксис string
Это похоже на метод синтаксис строки, кроме Вы можете применить несколько классов.
<!-- 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 (и тот, который вы, вероятно, использовать большинство), чтобы оценить выражение. Это работает так, что если переменная или выражение имеет значение "ИСТИНА", можно применить определенный класс. Если нет, тогда класс выиграли'т быть применены.
<!-- 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 используя вычисляемое выражение
Это аналогично оценивали методом выражения, за исключением вы просто сможете сравнивает несколько значений с единственной переменной.
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
Тернарный оператор позволяет использовать стенографию, чтобы указать два разных класса, если выражение верно и один за ложные. Вот базовый синтаксис тернарного оператора:
ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">
Если вы используете директиву ngRepeat и вы хотите применить классы к
Первый,
последний, или определенное количество в списке, вы можете использовать специальные свойства
ngRepeat. Они включают
$Первый,
долларов,
даже,
$нечет`, и некоторые другие. Здесь'ы пример, как использовать эти.
<!-- 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>