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

AngularJS ngClass 条件文を理解する

AngularJS では、ngClass ディレクティブは、提供されたオブジェクトの評価に基づいて CSS クラスを条件付きで適用するためによく使用されます。表現。この機能は単純ですが、考慮すべき点がいくつかあります。

ngClass の条件式

ngClass で条件式を作成するには、次の構文を使用するだけです。

<span ng-class="{test: <expression>}">test</span>

ただし、式は true または に評価される必要があることに注意することが重要です。 falsey 値。引用符は必要ありません。したがって、次のコードは機能しません:

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

代わりに、次のコードを使用してください:

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

式が true と評価された場合、テスト クラスが要素に適用されます。それ以外の場合は適用されません。

複雑な式

単純な比較を使用して表現できない複雑な条件については、真のまたはを返す関数を使用できます。 falsey value.

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

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

条件付きカスタム ディレクティブ式

制限関数とコンパイル関数を使用して、条件式をサポートするカスタム ディレクティブを作成することもできます。

myApp.directive('customConditional', function() {
  return {
    restrict: 'A',
    compile: function(tElement, tAttrs) {
      var expression = tAttrs.customConditional;
      return function postLink(scope, element) {
        scope.$watch(expression, function(newValue) {
          if (newValue) {
            element.addClass('my-class');
          } else {
            element.removeClass('my-class');
          }
        });
      };
    }
  };
});

結論

使用条件式を含む ngClass では、AngularJS で式がどのように評価されるかを理解する必要があります。真の値と偽の値を受け入れ、複雑な条件に関数を利用することで、動的な基準に基づいて CSS クラスを効果的に適用できます。

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