javascript - 在Angular JS中动态应用CSS样式属性(Apply CSS style attribute dynamically in Angular JS)

Question

This should be a simple problem, but I can't seem to find a solution.

(这应该是一个简单的问题，但我似乎无法找到解决方案。)

I have the following markup:

(我有以下标记：)

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

I need the background color to be bound to the scope, so I tried this:

(我需要将背景颜色绑定到范围，所以我尝试了这个：)

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

That didn't work, so I did some research and found ng-style , but that didn't work, so I tried taking the dynamic part out and just hard-coding the style in ng-style , like this...

(这不起作用，所以我做了一些研究并发现了ng-style ，但是没有用，所以我尝试将动态部分拿出来，只是用ng-style硬编码ng-style ，就像这样......)

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

and that doesn't even work.

(这甚至都不起作用。)

Am I misunderstanding how ng-style works?

(我是否误解了ng-style工作原理？)

Is there a way of putting {{data.backgroundCol}} into a plain style attribute and getting it to insert the value?

(有没有办法将{{data.backgroundCol}}放入普通样式属性并让它插入值？)

  ask by jonhobbs translate from so

Answer 1

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

(ngStyle指令允许您动态地在HTML元素上设置CSS样式。)

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

(对于其键是CSS样式名称和值的对象的表达是这些CSS键的对应值。)

Since some CSS style names are not valid keys for an object, they must be quoted.

(由于某些CSS样式名称不是对象的有效键，因此必须引用它们。)

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:

(这里有一个使用ngStyle小提琴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>