这应该是一个简单的问题,但我似乎找不到解决方案。
我有以下标记:
<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指令允许您设置CSS动态地对 HTML 元素设置样式。
表达它评估为一个对象,其键是 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)