css - 条件を満たす場合のスタイル要素、AngularJS

Question

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

これは可能ですか？ありがとうございました

Answer 1

ngクラスを使用

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

具体的には：

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

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

Answer 2

これを実現するために使用できますng-class。

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

Answer 3

クラスを宣言せずにそれを行う別の方法を次に示します。

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