CODEWITHSUNDEEP
angularjs
torbenrudgaard
torbenrudgaard

Reputation: 2551

Using angular variables in inline styles

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?

Upvotes: 6

Views: 11222

Answers (1)

Vivz
Vivz

Reputation: 6620

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

Upvotes: 8

Related Questions