在角形 JS 中动态应用 CSS 样式属性

这应该是一个简单的问题，但我似乎找不到一个解决办法。

我有以下标记:

<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，但是没有工作，所以我尝试去掉动态部分，只是硬编码的风格在 ng-style，像这样..。

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

而且根本不管用。我是不是误解了 ng-style的工作原理？有没有办法将 {{data.backgroundCol}}放入一个普通样式属性并让它插入值？

331510 次浏览
小开

Directly from ngStyle docs:

Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys.

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

So you could do this:

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

Hope this helps!

小开
最佳答案

ngStyle directive allows you to set CSS style on an HTML element dynamically.

Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys. Since some CSS style names are not valid keys for an object, they must be quoted.

ng-style="{color: myColor}"

Your code will be:

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

If you want to use scope variables:

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

Here an example on fiddle that use ngStyle, and below the code with the running snippet:

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>

小开

On a generic note, you can use a combination of ng-if and ng-style incorporate conditional changes with change in background image.

<span ng-if="selectedItem==item.id"
ng-style="{'background-image':'url(../images/'+'\{\{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(../images/'+'\{\{item.id}}'+'_deactivated.png)',
'background-size':'52px 57px',
'padding-top':'70px',
'background-repeat':'no-repeat',
'background-position': 'center'}">
</span>
小开

The easiest way is to call a function for the style, and have the function return the correct style.

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

And in your controller:

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

I would say that you should put styles that won't change into a regular style attribute, and conditional/scope styles into an ng-style attribute. Also, string keys are not necessary. For hyphen-delimited CSS keys, use camelcase. 

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

Simply do this:

<div ng-style="{'background-color': '\{\{myColorVariable}}', height: '2rem'}"></div>


提交答案