Javascript 根据范围变量应用css样式

我试图根据范围变量设置css属性

基本上是这样的：

 <div ng-style="background: filters.area ? #f39c12 : #424242">

或者它应该更像：

<div ng-style="filters.area ? 'background:#f39c12' : 'background:#424242'">

甚至：

<div ng-style="{{filters.area ? 'background:#424242' : 'background:#ff0000'}}">

---

但是，上述所有工作的

背景

值都将由三元运算符设置&也使用

{

&

}

而不是

{}

插值

基本上

ng-style

指令要求

JSON

&它在内部使用

element.css（JSON）

---

您需要一对“{}”。此代码可以通过使用

<div ng-style="{filters.area ? 'background:#424242' : 'background:#ff0000'}">

---

指令中的表达式中存在语法错误。这样试试看

HTML:

<div ng-controller="MainController">
    <div id="customControl" ng-style="filterarea ? {'background': '#f39c12'} : {'background':'#424242'}"></div>
</div>

#customControl{
    width : 100px;
    height : 100px;
    background-color : yellow;
}

CSS:

<div ng-controller="MainController">
    <div id="customControl" ng-style="filterarea ? {'background': '#f39c12'} : {'background':'#424242'}"></div>
</div>

#customControl{
    width : 100px;
    height : 100px;
    background-color : yellow;
}

小提琴：

有关ng样式检查的进一步帮助：

测试数据

我猜您的意思是没有第一个背景，因为它已经在三元结果中了。我有这样的东西：

但它没有任何作用，即使我添加了

，filterContent

类的背景也会保持不变！重要的在两种颜色之后codes@Ellone那是我的复制粘贴不好。请看我的最新答案谢谢

ng style=“filters.area？{'background'：'f39c12'}:{'background'：'424242'}>

工作正常！

<div ng-app="approvalApp">
    <div ng-controller="SimpleApprovalController" >
        <div ng-style="filters.area ? {'background-color' : '#424242'} : {'background-color' : '#ff0000'}">
            test data
        </div>
    </div>
</div>