使用OR运算符的AngularJS ng-class多条件

Question

我试图找出根据角度值添加类的良好语法.我想用OR运算符激活关于2个条件的类(一个关于实时用户更改,一个关于加载数据).

这是一行:

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

没有任何成功.有人能帮我找到好的语法吗？

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

不需要括号.

Answer 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
    };
};

Good Old 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';
    }
};