如何在AngularJS中有條件地設置屬性

Question

我有一個span元素顯示一些值。 如果該值不為0，我想將一些styleClass應用於該元素：

<span styleClass="alert-error">{{value}}</span>

否則，如果該值為0，則我不想應用styleClass 。 空的styleClass屬性是可以接受的：

<span styleClass="">{{value}}</span>

如何使用AngularJS做到這一點？

Answer 1

@shashank解決方案很好。

我總是喜歡在控制器或服務中包含邏輯部分。 我的解決方案是

$scope.getStyleCSS = function () {
    if ($scope.getValue() !== 0) {
        return 'alert-error';
    }
    return '';
}

$scope.getValue = function () {
    return $scope.value;
}

的HTML

<span styleClass="getStyleCSS()" ng-bind="getValue()"></span>

如果模板在Angular編譯之前由瀏覽器暫時以其原始狀態顯示，則最好使用ngBind代替{{expression}}。 由於ngBind是元素屬性，因此在頁面加載時，綁定使用戶不可見。

Answer 2

在這里，您可以使用三元運算符：

<span styleClass="{{value == 0 ? '' : 'alert-error'}}">{{value}}</span>

編輯：

對於class屬性，就像已經提到的一樣：

<span class="{{value == 0 ? '' : 'alert-error'}}">{{value}}</span>

另外，您可以使用ng-class ：

<span ng-class="{'alert-error': (value != 0)}">{{value}}</span>

Answer 3

嘗試這個...

利用ng-class

<span ng-class="{{value == 0 ? '' : 'alert-error'}}">{{value}}</span>