ng-style 中的多个属性

Posted

技术标签:

【中文标题】ng-style 中的多个属性【英文标题】:Multiple attributes in ng-style 【发布时间】:2015-06-08 18:16:51 【问题描述】:

我需要多个原始样式属性,例如:

$scope.css = "'width': 'calc(100% - "+$scope.fixedColumnsWidth+"'),'margin-left':'"+ $scope.fixedColumnsWidth+"'";

<div ng-style="css">

这不起作用。当我使用它时它可以工作

<div style="css">

但不适用于 IE。

【问题讨论】:

【参考方案1】:

ng-style 等待一个对象字面量,所以你需要将你的代码调整为

$scope.css = 
 width: 'calc(100% -'+$scope.fixedColumnsWidth+')',
 'margin-left': $scope.fixedColumnsWidth


<div ng-style="css"></div>

【讨论】:

【参考方案2】:

在视图下方使用

<div ng-style="
   'width': calc('100% -'+fixedColumnsWidth),
   'margin-left': fixedColumnsWidth">

【讨论】:

以上是关于ng-style 中的多个属性的主要内容,如果未能解决你的问题,请参考以下文章

在 ng-style 中使用多个三元组

如何在 ng-style 指令中根据多个条件应用多种样式?

AngularJS - ng-style 不更新 css 背景属性

Angularjs[24] - 内置节点属性

通过 angularJS ng-style 可变背景图像

在AngularJS中添加带有'ng-style'的背景图片