web-dev-qa-db-ja.com

OR演算子を使用したAngularJS ng-class複数条件

angularの値に応じて、クラスを追加するための適切な構文を見つけようとします。 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}"

成功せずに。誰かが良い構文を見つけるのを手伝ってくれますか？

angularjsconditionalng-class
20
user1713964

これを試して。

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

ブラケットは必要ありません。

32
Abhilash Augustine

ng-classの背後にいくつかのロジックを追加する必要がある場合は、コントローラーを使用してそれを行うことを常にお勧めします。 JSON構文（HTMLと同じ、より読みやすい）または明らかにJavaScriptの2つの方法のいずれかで実行できます。

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';
    }
};
9
SDekov

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を返す場合に適用されます。

したがって、1回クリックした後、fav===myfav.idがtrueを返し、再度クリックした場合でもtrueを返し続ける場合、fa-starクラスはそれ以降常に適用されます。

デフォルトでfavoriteがfalseの場合、fa-star-oはテンプレートが最初にロードされるときに適用されますが、最初のクリックの後、favoriteがtrueに設定されると取得されます削除されました。次に、2回目のクリックでfavoriteが再びfalseに設定されると、fa-star-oが適用されますが、この場合、fa-starクラスもfa===myfav.id条件として適用されますまだtrueを返している（そうであると仮定して）。

したがって、要素に両方のクラスが同時に存在できる場合に発生する可能性があるため、要素に存在するときに確実に適用する必要があるクラスを優先する必要があります。たとえば、fa-star-oクラスの優先度が高い場合、CSSのfa-starの下に配置します（例：

.fa-star {
  border: 1px solid #F00;
}
.fa-star-o {
  border: 1px solid #000;
}

http://plnkr.co/edit/Dh59KUU41uWpIkHIaYrO?p=preview の作業デモを参照してください

4
Prayag Verma

Ng-classで式を使用できます

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