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

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

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-statement (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, даже при повторном нажатии, затем class fa-star будет применяться всегда с тех пор.

если по умолчанию favorite is 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-class

  <i class="fa orange" ng-class="favorite || fav == myfav.id ? 'fav' : 'no-fav'"></i>
2