如何有效地將 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，則測試類別將會套用於該元素。否則，它將不會被應用。

複雜表達式

對於無法使用簡單比較來表達的複雜條件，您可以使用傳回 true 或falsey 值。

<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中文網其他相關文章！