AngularJS の ngClass ディレクティブで条件式を効果的に使用するにはどうすればよいですか?

AngularJS の ngClass ディレクティブの条件式

AngularJS は、指定された式に基づいて CSS クラスを動的に追加および削除する ngClass ディレクティブを提供します。ただし、ngClass 内に条件式を組み込むのは難しい場合があります。

アプローチの例

1 つの試みは、次のような式を ngClass 内で直接使用することです。

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

ただし、この式は、 の値に関係なく、常に「test」クラスを適用します。 obj.value1.

これを回避するには、真または偽の値を返す関数を定義できます:

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

次に、ngClass 内でこの関数を使用します:

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

条件式の正しい構文

次のことに注意してくださいngClass で条件式を直接使用する場合は、式を囲む引用符を省略する必要があります。正しい構文は次のとおりです。

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

カスタム ディレクションとウォッチ式

ウォッチ式を必要とするカスタム ディレクティブを作成している場合は、AngularJS が行うことを理解することが重要です。表現を直接監視することはできません。代わりに、$watch メソッドを使用して、特定のモデル値の変化を観察できます。

追加機能

ngClass は論理演算子をサポートしており、複雑な条件式を作成できます。 。例:

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

この式は、obj.value1 が「someothervalue」と等しいか、obj.value2 が「somethingelse」と等しい場合に「test」クラスを適用します。

以上がAngularJS の ngClass ディレクティブで条件式を効果的に使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。