AngularJS ng-класс множественных условий с помощью оператора OR

#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>