Change css property dynamically using AngularJS

Question

I'm trying to change the background color of a class dynamically, the color that I have to use comes from an API. I'm using a pseudo-element because what I want to achieve is like this

  <div class="despesas_interna">


                    <a ng-class="{'status ': style(despesa.categoria_cor)}">

                        {{despesa.data | amDateFormat:"DD/MM/YYYY"}}
                        <span>{{despesa.categoria_nome}}
                        <i class="ion-ios-arrow-right despesas_arrow"></i>
                        </span>

                        <p>

                            {{despesa.valor | moneyFormatBR}}
                            <span> </span></p>
                    </a>

                </div>

Controller:

 $scope.style = function(value) {
            return { "background-color": value };
        }

CSS:

.despesas_interna {

    padding: 10px 10px 10px 15px;
    font-weight: normal;
    font-size: 15px;

}

.despesas_interna a:before {
    content: "";
    display: block;
    position: absolute;
    width: 7px;
    left: 0;
    top: 0;
    bottom: 0;

}

.despesas_interna a.status:before {

    background-color: #87c424;

}

Seems like ng-style is better suited for this

Francis Nepomuceno
– Francis Nepomuceno

2015-03-31 20:51:00 +00:00
Commented Mar 31, 2015 at 20:51 — Francis Nepomuceno
– Francis Nepomuceno, Commented Mar 31, 2015 at 20:51

floribon · Accepted Answer · 2015-03-31 20:55:37Z

1

Use ng-style instead of ng-class. You have two ways to use it:

<div ng-style="style(value)">

and

<div ng-style="{'background-color': value}">

answered Mar 31, 2015 at 20:55

floribon

19.2k5 gold badges56 silver badges68 bronze badges

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

1 Comment

Stack two Over a year ago

still not getting what I want, I need to change the color of background of ".despesas_interna a.status:before" dynamically

Collectives™ on Stack Overflow

Change css property dynamically using AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related