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>

修改

对于类属性，就像其他人已经提到过的那样：

<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>

如何在AngularJS中有条件地设置属性

3 个答案: