首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在Angular JS中动态应用CSS样式属性

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

Stack Overflow用户
提问于 2014-01-26 22:15:55
回答 4查看 328.7K关注 0票数 113

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

我有以下标记:

代码语言:javascript
复制
<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>

我需要将背景颜色绑定到作用域,所以我尝试这样做:

代码语言:javascript
复制
<div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div>

这不起作用,所以我做了一些研究,找到了ng-style,但这不起作用,所以我试着去掉动态部分,只用ng-style硬编码样式,就像这样……

代码语言:javascript
复制
<div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div>

但那根本不管用。我是不是误解了ng-style的工作原理?有没有一种方法可以把{{data.backgroundCol}}放到一个普通的样式属性中,并让它插入值?

EN

回答 4

Stack Overflow用户

发布于 2014-10-10 22:19:50

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

代码语言:javascript
复制
<div style="{{functionThatReturnsStyle()}}"></div>

在你的控制器中:

代码语言:javascript
复制
$scope.functionThatReturnsStyle = function() {
  var style1 = "width: 300px";
  var style2 = "width: 200px";
  if(condition1)
     return style1;
  if(condition2)
     return style2;
}
票数 24
EN

Stack Overflow用户

发布于 2014-09-21 23:23:53

一般而言,您可以结合使用ng-if和ng-style,将条件更改与背景图像中的更改合并在一起。

代码语言:javascript
复制
<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>
票数 14
EN

Stack Overflow用户

发布于 2018-02-09 03:08:57

我想说的是,您应该将不会更改的样式放入常规style属性中,并将条件/范围样式放入ng-style属性中。此外,字符串键也不是必需的。对于连字符分隔的CSS键,请使用camelcase。

代码语言:javascript
复制
<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/21364445

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档