Search code examples
javascripthtmlcssangularjsng-style

Ng-style not working for background

I need to set background of element from configuration object through ng-style, but I can't do that for some unknown reason, it's really weird for me and I really can't find the reason why.

The element I'm trying to configure:

<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }"></div>

pblc stands for controller here, I'm using controllerAs option

The configuration object:

this.progressLOptions = {
    color: '#F0F3F4',
    width: '200px',
    height: '20px',
};

The weirdest thing is that width and height are setted, in rendered html I see this:

<div id="progress-l" ng-style="{ 'width': pblc.options.width, 'height': pblc.options.height, 'background': plbc.options.color }" style="width: 200px; height: 20px;">
</div>

I really have no idea how can ng-style work like so. Is there some issue with background I wasn't able to find?

Solution

  • Updated answer: You have a typo - plbc.options.color instead of pblc.options.color

    The most likely reason is that plbc.options.color is undefined, empty, not in scope or misconfigured. This is in case there's no syntax error of course.

    Try outputting it as an expression in the template - {{plbc.options.color}} and check it.