AngularJS ngClass で条件式を使用するにはどうすればよいですか?

AngularJS ngClass の条件式

AngularJS ngClass ディレクティブを使用すると、ブール式に基づいて CSS クラスを HTML 要素に条件付きで適用できます。式を条件付きにするには、次の構文を使用できます:

ng-class="{test: condition}"

ここで、条件は true または false に評価される JavaScript 式です。

例:

プロパティ value1 が「someothervalue」に設定されたオブジェクト obj があるとします。次の ngClass 式を使用して、条件付きで CSS クラス「test」を要素に適用できます:

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

obj.value1 が 'someothervalue' と等しい場合、'test' クラスが要素に適用されます.

真実と偽り式:

ngClass ディレクティブは、式を「真実」または「偽」の値として評価します。真実の値 (例: 「true」、「1」、「yes」) はクラスを適用しますが、偽の値 (例: 「false」、「0」、「no」) はクラスを適用しません。

複雑な式:

条件ロジックが複雑になりすぎる場合は、真または偽の値を返す関数を使用します。

例:

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

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

論理式:

論理演算子を使用して論理式を形成することもできます。 ngClass.

例:

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

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

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