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?](https://stackoverflow.com/questions/13813254/how-do-i-conditionally-apply-css-styles-in-angularjs) — Mistalis, Aug 31 '17 at 15:01
Possible duplicate of [Multiple attributes in ng-style](https://stackoverflow.com/questions/29435883/multiple-attributes-in-ng-style) — Kyle Krzeski, Aug 31 '17 at 15:35

score 7 · Accepted Answer · answered Aug 31 '17 at 14:51

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

Using angular variables in inline styles

1 Answers1