如何通过函数获取 ng-style 的多 css 规则？

Posted 2023-03-06

【中文标题】如何通过函数获取 ng-style 的多 css 规则？

【英文标题】：How to get multi css rule for ng-style by function?

【发布时间】：2014-04-14 21:05:00

【问题描述】：

我需要将多 css 规则应用于角度表单模板中的 html 标记。

<div class="form-control" id="data.objectStyle"  
  ng-model="data.type" 
  ng-style="getStyle(data.objectStyle)">
data.objectStyle.title
</div>

控制器中的getStyle函数：

$scope.getStyle = function (taskType) 
    return 
         background-color:taskType.backColor,
         color: taskType.color,
         font-size:taskType.fontSize,
         font-family:taskType.font
    
);

taskType 对象：

    backColor:'#006',
    color:'#56DA',
    fontSize:12,
    font:'New Times Roman'

getStyle 函数不返回样式！怎么办？

【问题讨论】：

您没有包含足够的代码。函数返回什么？ taskType.backColor等的值是多少？

@Ed Hinchliffe taskType = backColor:'#006',color:'#56DA',fontSize:12,font:'New Times Roman'。

那应该可以了。控制台出错？

【参考方案1】：

编辑

docs 指定您需要将密钥用引号括起来，这样它们就不是无效的 JSON 对象密钥：

return 
     "background-color": taskType.backColor,
     "color": taskType.color,
     "font-size":taskType.fontSize,
     "font-family":taskType.font

---

旧答案（不使用 ng 样式）

虽然我从未使用过ng-style，但它似乎不接受对象。相反，它相当于 ng-class，但适用于单一样式。

尝试将您的功能更改为：

$scope.getStyle = function (taskType) 

        return 
         "background-color:"+taskType.backColor+
         ";color:"+ taskType.color+
         ";font-size:"+taskType.fontSize+
         ";font-family:"+taskType.font+";";
    
);

以及使用带有绑定的常规样式标签的 html：

<div class="form-control" id="data.objectStyle"  
ng-model="data.type" style="getStyle(data.objectStyle)">

【讨论】：

@crmpicco，查看docs或者问个问题，不然帮不上忙

我认为这应该可行：ng-style="getStyle(data.objectStyle)"

@crmpicco，考虑到密钥用引号括起来，它应该可以工作

您使用的是哪个版本的 AngularJS？我正在使用 1.0.7。

实际上，您不需要将属性括在引号中 - 无论如何，这在语法上是相同的。你也不需要分号（事实上我很惊讶他们会工作）。它现在确实需要对象。您也可以使用驼峰式，例如；返回背景颜色：'红色'，颜色：'蓝色';