Question

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

我有以下标记：

<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}}放入普通样式属性并让它插入值？

Answer 1

ngStyle指令允许您动态地在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>

如果您想使用范围变量：

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

Here使用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>

Answer 2

最简单的方法是为样式调用函数，并让函数返回正确的样式。

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

在你的控制器中：

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

Answer 3

直接来自ngStyle docs：

表达式，它表示对象是CSS样式名称的对象值是这些CSS密钥的对应值。

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

所以你可以这样做：

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

希望这有帮助！

Answer 4

在一般说明中，您可以结合使用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>

Answer 5

我想说你应该将不会改变为常规style属性的样式和条件/范围样式放入ng-style属性中。此外，不需要字符串键。对于连字符分隔的CSS密钥，请使用camelcase。

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

Answer 6

只需执行以下操作：

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

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

6 个答案: