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

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硬编码样式，就像这样……

<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? Is there a way of putting {{data.backgroundCol}} into a plain style attribute and getting it to insert the value?

这甚至都不起作用。我是否误解了ng风格的工作方式?是否存在放置{data的方法。将backgroundCol}}插入普通样式属性并让它插入值?

5 个解决方案

#1

179

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. Since some CSS style names are not valid keys for an object, they must be quoted.

一个对象的表达式，其键为CSS样式名称，值为这些CSS键的对应值。由于某些CSS样式名称不是对象的有效键，因此必须引用它们。

ng-style="{color: myColor}"

ng-style = " {颜色: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的fiddle的示例，代码下面是正在运行的代码片段:

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>

#2

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;
}

#3

Directly from ngStyle docs:

直接从ngStyle文档:

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

一个对象的表达式，其键为CSS样式名称，值为这些CSS键的对应值。

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

So you could do this:

你可以这样做:

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

Hope this helps!

希望这可以帮助!

#4

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

一般来说，您可以使用ng-if和ng-style的组合，将条件更改与背景图像的更改合并在一起。

<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>

#5

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.

我认为您应该将不会更改的样式放入常规样式属性，将条件/范围样式放入ng样式属性。同样，不需要字符串键。对于连字符分隔的CSS键，请使用camelcase。

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

#1

179