我试图根据范围变量设置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'}}">
但以上都没有工作
答案 0 :(得分:1)
background
值将由三元运算符&amp;还可以使用{
&amp; }
代替{{}}
插值。
基本上ng-style
指令要求JSON
&amp;在内部使用element.css(JSON)
<div ng-style="{'background' : filters.area ? '#424242' : '#ff0000'}">
答案 1 :(得分:1)
ng-style 指令内的表达式中存在语法错误。试试这种方式,
HTML:
<div ng-controller="MainController">
<div id="customControl" ng-style="filterarea ? {'background': '#f39c12'} : {'background':'#424242'}"></div>
</div>
javaScript:(angularjs)
angular.module("myapp", []).controller("MainController", ["$scope", function($scope){
$scope.filterarea = false;
}]);
CSS:
#customControl{
width : 100px;
height : 100px;
background-color : yellow;
}
答案 2 :(得分:0)
您需要拥有一对&#39; {}&#39;。使用
可以轻松修复此代码<div ng-style="{filters.area ? 'background:#424242' : 'background:#ff0000'}">
答案 3 :(得分:0)
小提琴:http://jsfiddle.net/jpk547zp/3/
有关ng-style检查的进一步帮助:https://docs.angularjs.org/api/ng/directive/ngStyle
<div ng-app="approvalApp">
<div ng-controller="SimpleApprovalController" >
<div ng-style="filters.area ? {'background-color' : '#424242'} : {'background-color' : '#ff0000'}">
test data
</div>
</div>
</div>