Множественные условия AngularJS ng с оператором OR

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

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

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

  

Нет скобок.

Ответ 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';
    }
};

Ответ 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 истинно или fav===myfav.id возвращает true.

Поэтому, если после щелчка один раз предположим, что fav===myfav.id возвращает true и продолжает возвращать true, даже при повторном нажатии, класс fa-star будет применяться всегда с этого момента.

Если по умолчанию favorite является ложным, тогда 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>