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

Я пытаюсь найти хороший синтаксис для добавления классов в зависимости от угловых значений. Я хочу активировать класс в отношении 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}"

Без всякого успеха. Может кто-нибудь помочь мне найти хороший синтаксис ?

4 15
angularjs conditional ng-class

4 ответа:

Попробуйте это.

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

Скобки не нужны.

23

Как только вы должны добавить некоторую логику за 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';
    }
};
8

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 истинно, либо когда 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>
2