使用 AngularJS 动态更改 css 属性

Question

我正在尝试动态更改类的背景颜色，我必须使用的颜色来自 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;

}

Answer 1

使用ng-style 代替ng-class。你有两种使用方式：

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

和

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