#angularjs #conditional #ng-class
#angularjs #условные операторы #ng-класс
Вопрос:
Я пытаюсь найти хороший синтаксис для добавления классов в зависимости от угловых значений. Я хочу активировать класс в отношении 2 условий (одно для изменений пользователя в реальном времени и одно для загрузки данных) с помощью оператора OR.
Вот строка :
<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
<i class="fa orange" ng-class="{'fa-star': (favorite || (fav==myfav.id)), 'fa-star-o': !favorite}"></i>
</a>
Я пробовал несколько разных кодов, подобных этому :
ng-class="{'fa-star': favorite, 'fa-star': (fav==myfav.id), 'fa-star-o': !favorite}"
без какого-либо успеха.
Может кто-нибудь помочь мне найти хороший синтаксис?
Комментарии:
1. Так и должно быть
{'fa-star': favorite || fav == myfav.id, 'fa-star-o': !favorite}
. Смотрите аналогичный пример в этом plunkr . Я попытался заменить этот код наng-class="{'has-error': ctrl.submitted amp;amp; 1 == 1}
, и он работает.2. Скобки должны работать так же хорошо. Если я изменю ваш код Plunkr и добавлю их в ваше выражение AND , все по-прежнему будет работать. Я полагаю, что у OP есть какая-то другая проблема с их кодом.
3. Да, это был мой первый код, но, похоже, он не применяет класс. Я протестировал
fav == myfav.id
внешний, и он возвращает «true», как и должно быть.4.Ох. Может ли это быть что-то о логике: если
!favorite
, ноfav==myfav.id
результат будет иfa-star
fa-star-o
тем, и другим, а затем применяется последний и визуально не меняет значок. Поэтому я не уверен, что мой «переключатель» работает в этом случае
Ответ №1:
Попробуйте это.
<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
<i class="fa orange" ng-class="{'fa-star': favorite || fav==myfav.id, 'fa-star-o': !favorite}"></i>
Скобки не нужны.
Комментарии:
1. Это работает не так, как ожидалось. Кажется, что альтернативное условие игнорируется при обновлении одной модели.
2. @isherwood Ты имел в виду, когда переменная favorite = false и fav == myFav.id ? Это приведет к добавлению обоих классов ‘fa-star’ и ‘fa-star-o’.
3. Проблема связана с оператором OR, а не со вторым классом. Когда одно из условий изменяется, оно переопределяет другое условие.
4. @isherwood под переопределением, что именно вы имеете в виду, не могли бы вы немного уточнить. кроме того, если бы вы могли сказать, что именно вы хотите, чтобы это произошло, и этого не произошло, это прояснило бы любые неправильные предположения, которые мы сделали
5. К сожалению, у меня возникли проблемы с воспроизведением проблемы, которую я видел. Возможно, мне придется отказаться.
Ответ №2:
Как только вам нужно добавить некоторую логику ng-class
, всегда лучше придерживаться использования контроллера для этого. Вы можете сделать это двумя способами: синтаксис JSON (такой же, как в вашем HTML, просто более читаемый) или, очевидно, JavaScript.
Синтаксис HTML (JSON)
HTML
<i ng-class="getFavClassIcon(myFav.id)"></i>
JS
$scope.getFavClassIcon= function (favId) {
return {
'fa-star-o' : !$scope.favorite,
'fa-star' : $scope.favorite || $scope.fav === favId
};
};
Старый добрый оператор IF (JavaScript)
HTML
<i ng-class="getFavClassIcon(myFav.id)"></i>
JS
$scope.getFavClassIcon= function (favId) {
if (!$scope.favorite) {
return 'fa-star-o';
} else if ($scope.favorite) { // obviously you can use OR operator here
return 'fa-star';
} else if ($scope.fav === favId) {
return 'fa-star';
}
};
Комментарии:
1. Старомодный if здесь лучший, особенно если несколько переменных влияют на имя класса
2. Это блестящий способ сделать это — достаточно простой, чтобы любой мог его понять и понять. Спасибо.
Ответ №3:
HTML останется прежним
<a href="" ng-click="addFavorite(myfav.id);favorite=!favorite">
<i ng-class="{'fa-star-o':!favorite,'fa-star':favorite||fav===myfav.id}"></i>
</a>
Но порядок, в котором классы присутствуют в вашем файле CSS, будет иметь значение
fa-star
Класс будет применяться либо при favorite
значении true, либо fav===myfav.id
при возврате true .
Поэтому, если после щелчка один раз, предположим fav===myfav.id
, возвращает true и продолжает возвращать true , даже при повторном нажатии, тогда fa-star
с этого момента класс будет применяться всегда.
Если по умолчанию favorite
равно false , то fa-star-o
будет применен при загрузке шаблона в первый раз, но после первого щелчка, когда favorite
установлено значение true, он будет удален. Затем при втором щелчке, когда favorite
снова установлено значение false , fa-star-o
оно будет применено, но в этом случае fa-star
также будет применен класс, поскольку fa===myfav.id
условие все равно будет возвращать true (при условии, что это так).
Поэтому вам нужно будет определить приоритетность того, какой класс должен быть обязательно применен, когда он присутствует в элементе, поскольку может возникнуть случай, когда оба класса могут присутствовать в элементе одновременно. Например, если fa-star-o
класс имеет более высокий приоритет, поместите его ниже fa-star
в свой CSS, например, например
.fa-star {
border: 1px solid #F00;
}
.fa-star-o {
border: 1px solid #000;
}
Смотрите рабочую демонстрацию на http://plnkr.co/edit/Dh59KUU41uWpIkHIaYrO?p=preview
Ответ №4:
Вы можете использовать выражение с ng-классом
<i class="fa orange" ng-class="favorite || fav == myfav.id ? 'fav' : 'no-fav'"></i>
Ответ №5:
Например: в моем сценарии мне нужно применить класс верхнего регистра в некотором условии, а в некотором условии мне не нужно применять этот класс верхнего регистра.
inputTextCapitalSmall(assetId) {
return {
'uppercase': assetId !== 'TELEKURS' amp;amp; assetId !== 'REUTERS' amp;amp; assetId !== 'Samp;P',
};
}
<form [formGroup]="querySearchForm" >
<input autocomplete="off" matInput id="assetIdTypeValue" [ngClass]="inputTextCapitalSmall(querySearchForm.value.assetIdType)" >
</form>