AngularJS ng-class で条件付きクラスの割り当てを効率的に処理するにはどうすればよいですか?

AngularJS ngClass での条件式の処理

ng-class の式を使用して、条件付きクラスの割り当てを指定でき、要素の動的な制御が可能になります。特定の条件の評価に基づくクラス。これを実現する方法を見てみましょう。

条件付きクラスの割り当て

条件式に基づいてクラスを割り当てるには、単に条件の前後の引用符を省略します。

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

この例では、obj.value1 が「someothervalue」と等しい場合、「test」クラスは に適用されます。それ以外の場合、クラスは削除されます。

カスタム ディレクティブ

条件ロジックが ng-class に対して複雑すぎる場合は、代わりにカスタム ディレクティブの使用を検討してください。ただし、式の直接の監視は AngularJS ではサポートされていないことに注意することが重要です。代わりに、次に示すように、真または偽の値を返す関数を使用します。

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

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

論理式

さらに、論理演算子を利用することもできます。複雑な条件式を作成します。たとえば、次のコードは、obj.value1 が 'someothervalue' に等しい場合、または obj.value2 が 'somethingelse' に等しい場合に 'test' クラスを適用します。

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

これらのテクニックを理解することで、ng- を効果的に利用できます。ユーザー定義の条件に基づいて要素クラスを動的に管理するクラス。

以上がAngularJS ng-class で条件付きクラスの割り当てを効率的に処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。