在 Angular JS 中动态应用 CSS 样式属性 [英] Apply CSS style attribute dynamically in Angular JS

问题描述

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

我有以下标记:

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

解决方案

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>

这里 一个使用 ngStyle 的小提琴示例，下面是带有正在运行的代码段的代码:

angular.module('myApp', []).controller('MyCtrl', function($scope) {$scope.items = [{name: '米斯科',标题:'角度创造者'}, {name: '伊戈尔',title: '聚会大师'}, {name: 'Vojta',书名:《全能超级英雄》}];});

.pending-delete {背景颜色:粉红色}

<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="输入颜色名称"><div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">名称:{{item.name}}，{{item.title}}<input type="checkbox" ng-model="item.checked"/><span ng-show="item.checked"/><span>(将被删除)</span>

<p><div ng-hide="myColor=='red'">如果颜色设置为'red'，我会隐藏.</div>

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

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

解决方案

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>

这篇关于在 Angular JS 中动态应用 CSS 样式属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！