web-dev-qa-db-ja.com

Angular ng-class else else

False ngクラスを作成する方法を知りたいです。

page.isSelected（1）は、ページが選択されている場合はTRUE、そうでない場合はFALSE

<div id="homePage" ng-class="{ center: page.isSelected(1) }">

したがって、私はあなたが欲しい：

isSelectedはTRUE：中央

isSelectedはFALSE：左

私は試した：

<div id="homePage" ng-class="{ page.isSelected(1) 'center : 'left' }">

しかし、それは動作しません。

何が間違っているのかわかりません。助けてくれませんか？

javascripthtmlangularjsng-class
31
BlackCode

ケースごとにルールを作成するだけです。

<div id="homePage" ng-class="{ 'center': page.isSelected(1) , 'left': !page.isSelected(1)  }">

または、三項演算子を使用します。

<div id="homePage" ng-class="page.isSelected(1) ? 'center' : 'left'">
65
John Conde

三項演算子表記を使用できます。

<div id="homePage" ng-class="page.isSelected(1)? 'center' : 'left'">
27
ryeballar

John Conde's と ryeballar's の両方の答えは正しく、動作します。

オタクになりたい場合：

  • John'sには、$ digestループごとに2つの決定を行う必要があるという欠点があります（centerを追加/削除するかどうか、およびleftを追加/削除するかどうかを決定する必要があります） 1つが必要です。

  • Ryeballarは三項演算子に依存していますが、これはおそらくある時点で削除されるでしょう（ビューにロジックが含まれてはならないため）。 （実際に削除されるかどうかはわかりませんが、おそらくすぐには削除されませんが、より安全なソリューションがある場合は、なぜですか？）

そのため、代わりに以下を実行できます。

ng-class="{true:'center',false:'left'}[page.isSelected(1)]"
9
gkalpak