1. ホーム
  2. html

[解決済み] AngularJSのngClassの条件付き

2022-03-19 21:58:07

質問

のような式を作る方法はありますか? 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 は動作するようになっています。 私もカスタムディレクティブを作っていて、これと似たようなことをしたいと思っています。しかし、私は式を見る方法を見つけることができません(そして、多分それは不可能であり、このように動作する理由です)。

以下は プランクル を使えば、私の言いたいことがわかります。

解決方法は?

最初の試みはほぼ正しいです。

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

以下は プルンクル .

ngClassディレクティブは、trulyまたはfalseyと評価されるすべての式で動作します。これはJavascriptの式と少し似ていますが、いくつかの違いもあります。 ここで . もし条件が複雑すぎる場合は、3回目の試行のように、truthyまたはfalseyを返す関数を使用することができます。

一応補足しておきます。また、論理演算子を使って、次のような論理式を作ることができます。

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