AngularJS ngClass条件付き質問する

AngularJS ngClass条件付き質問する

次のような表現を作る方法はありますか?ng-class条件付きですか?

たとえば、次のことを試しました。

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

このコードの問題は、何であってもobj.value1、クラス テストが常に要素に適用されることです。次のようにします。

<span ng-class="{test: obj.value2}">test</span>

が真の値と等しくない限りobj.value2、クラスは適用されません。最初の例の問題は、次のようにして回避できます。

<span ng-class="{test: checkValue1()}">test</span>

関数はcheckValue1次のようになります。

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

これがどのように動作するのか疑問に思っていますng-class。また、これに似たようなことをしたいカスタム ディレクティブも作成しています。ただし、式を監視する方法が見つかりません (おそらくそれが不可能で、このように動作する理由です)。

がここにありますplnkr私の言いたいことを示すためです。

ベストアンサー1

最初の試みはほぼ正しかったです。引用符なしでも機能するはずです。

{test: obj.value1 == 'someothervalue'}

がここにありますplnkr

ngClassディレクティブは、trueまたはfalseを評価する任意の式で機能します。Javascript式に少し似ていますが、いくつかの違いがあります。ここ条件が複雑すぎる場合は、3 回目の試行で行ったように、truthy または falsey を返す関数を使用できます。

補足:論理演算子を使用して、次のような論理式を作成することもできます。

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

おすすめ記事