CODEWITHSUNDEEP
cssangularjsng-style
tryingtolearn
tryingtolearn

Reputation: 2636

Style elements if satisfy condition, AngularJS

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

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

I want to make it so that if item.attribute == attribute1 then the color of the button is coral

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

    background-color: coral;
    color: #fff;
}

Is this possible? Thank you

Upvotes: 1

Views: 611

Answers (3)

Vikas Bansal
Vikas Bansal

Reputation: 11730

Here is another way of doing it without declaring a class.

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

Upvotes: 0

razor
razor

Reputation: 110

You can use ng-class to accomplish this.

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

Upvotes: 0

Mike
Mike

Reputation: 345

Use ng-class

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

Specifically:

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

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

Upvotes: 2

Related Questions