如果满足条件，则样式元素，AngularJS

Posted 2023-03-06

【中文标题】如果满足条件，则样式元素，AngularJS

【英文标题】：Style elements if satisfy condition, AngularJS

【发布时间】：2015-11-03 22:09:24

【问题描述】：

<div ng-if="item.attribute == 'attribute1'">
    doSomething
</div>

<button class="button button-block button-postive waves-effect waves-button waves-light">
    Button 1
</button>

我想这样如果 item.attribute == attribute1 那么按钮的颜色是珊瑚色

.button.button-block, .button.button-full 

    background-color: coral;
    color: #fff;

这可能吗？谢谢

【参考方案1】：

这是另一种不声明类的方法。

ng-style="item.attribute == 'attribute1' 
    && 'background-color':'red', 'color':'white' || 'background-color':'blue', 'color':'white'"

【参考方案2】：

您可以使用ng-class 来完成此操作。

<button ng-class="'button-block': item.attribute==attribute1">

【参考方案3】：

使用 ng-class

ng-class=" 'style': condition, 'style2' : condition2"

具体来说：

ng-class=" 'button-block': item.attribute == 'attribute1'"

https://docs.angularjs.org/api/ng/directive/ngClass