CODEWITHSUNDEEP
htmlangularjsangularjs-ng-repeat
KvnH
KvnH

Reputation: 506

Applying different styles to items created with ng-repeat

I wish to apply different stylings to buttons created using ng-repeat. I want b.color to return a value from the btnValues object but it does not return the value. Is this possible or is there another way of doing it?

<a href=""
class="modal-button {{b.color}}"
data-ng-repeat="b in btnValues"
data-ng-click="close(b.value)">{{ b.name }}</a>

Upvotes: 0

Views: 61

Answers (2)

Davide Lorenzo MARINO
Davide Lorenzo MARINO

Reputation: 26926

Try with

<a href=""
class="modal-button" ng-class="b.color"
data-ng-repeat="b in btnValues"
data-ng-click="close(b.value)">{{ b.name }}</a>

If it doesn't work check the value of {{b.color}} to be sure that is valued.

Then check if the class with name corresponding to {{b.color}} is present in the css.

Upvotes: 1

Yoann Prot
Yoann Prot

Reputation: 524

You can try ng-class or ng-style :

<a href=""
class="modal-button" ng-style="{ color: b.color }"
data-ng-repeat="b in btnValues"
data-ng-click="close(b.value)">{{ b.name }}</a>

or

<a href=""
class="modal-button" ng-class="b.color"
data-ng-repeat="b in btnValues"
data-ng-click="close(b.value)">{{ b.name }}</a>

Upvotes: 0

Related Questions