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

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 样式。

表示一个对象的表达式，该对象的键是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>

这是在上使用的小提琴的示例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>