使用AngularJS动态更改css属性

时间:2015-03-31 20:43:46

标签: javascript html css angularjs pseudo-element

我试图动态更改类的背景颜色,我必须使用的颜色来自API。我使用的是伪元素,因为我想要实现的就像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>

控制器:

 $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;

}

1 个答案:

答案 0 :(得分:1)

使用ng-style代替ng-class。您有两种方法可以使用它:

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

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