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

How to set an attribute conditionally in AngularJS

本文关键字：属性 一个 设置 AngularJS 有条件      更新时间：2023-09-26

我有一个span元素显示一些值。如果值不为0，我想对元素应用一些styleClass:

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

否则，如果值为0，我不想应用styleClass。可以使用空的styleClass属性:

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

如何在AngularJS中做到这一点?

@shashank解决方案很好。

我总是喜欢在控制器或服务中有逻辑部分。我的解决方案是

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


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

如果一个模板在Angular编译之前被浏览器暂时以原始状态显示，那么最好使用ngBind而不是{{expression}}。因为ngBind是一个元素属性，所以当页面加载时，它会让用户看不到这些绑定。

开始了(只需使用三元操作符):

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

试试这个…

使用ng-class 

<span ng-class="{{value == 0 ? '' : 'alert-error'}}">{{value}}</span>
相关文章：