CODEWITHSUNDEEP
javascripthtmlcssangularjspseudo-element
Stack two
Stack two

Reputation: 541

Change css property dynamically using AngularJS

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;

}

Upvotes: 1

Views: 2992

Answers (1)

floribon
floribon

Reputation: 19183

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}">

Upvotes: 1

Related Questions