Using angular variables in inline styles

Question

I want to use the background color from my json array, but this does not work.

<td ng-repeat="menus in $scope.menuList">
    <button class="head-button" style="background-color:{{menus.color}}" ui-sref="{{menus.link}}">
        <md-icon>{{menus.icon}}</md-icon>
        <md-tooltip md-direction="top">{{menus.tooltip}}</md-tooltip>
        <div class="head-mini-text">{{menus.text}}</div>
    </button>
</td>

How come that style="background-color:{{menus.color}}" is not working? Is there a better way to do this?

Possible duplicate of How do I conditionally apply CSS styles in AngularJS? — Mistalis
– Mistalis, Commented Aug 31, 2017 at 15:01

Vivz · Accepted Answer · 2017-08-31 14:51:04Z

8

You can use angular directive ng-style to dynamically change the color of your background

HTML:

 <button class="head-button" ng-style="{'background-color':menus.color}" ui-sref="{{menus.link}}">

For more reference: https://docs.angularjs.org/api/ng/directive/ngStyle

answered Aug 31, 2017 at 14:51

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using angular variables in inline styles

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related