CSS 如何按功能获取ng样式的多css规则？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22322567/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get multi css rule for ng-style by function?
提问by sajjad
I need for apply multi css rule to html tag in angular form template.
我需要将多 css 规则应用于角度表单模板中的 html 标签。
<div class="form-control" id="data.objectStyle"
ng-model="data.type"
ng-style="getStyle(data.objectStyle)">
{{data.objectStyle.title}}
</div>
getStyle function in controller :
控制器中的 getStyle 函数：
$scope.getStyle = function (taskType) {
return {
background-color:taskType.backColor,
color: taskType.color,
font-size:taskType.fontSize,
font-family:taskType.font
}
)};
taskType object:
任务类型对象：
{
backColor:'#006',
color:'#56DA',
fontSize:12,
font:'New Times Roman'
}
The getStylefunction does not return a style! What to do?
该getStyle函数不返回样式！该怎么办？
回答by caffeinated.tech
EDIT
编辑
The docsspecify that you need to wrap your keys in quotation marks so they aren't invalid JSON object keys:
该文件规定，你需要用引号中的密钥，以便它们不是无效的JSON对象键：
return {
"background-color": taskType.backColor,
"color": taskType.color,
"font-size":taskType.fontSize,
"font-family":taskType.font
}
Old Answer (not using ng-style)
旧答案（不使用 ng-style）
While I never used ng-style, it doesn't seem to take objects. Rather it is an equivalent of ng-class but for single styles.
虽然我从未使用过ng-style，但它似乎不带对象。相反，它相当于 ng-class，但用于单一样式。
Try changing your function to:
尝试将您的功能更改为：
$scope.getStyle = function (taskType) {
return {
"background-color:"+taskType.backColor+
";color:"+ taskType.color+
";font-size:"+taskType.fontSize+
";font-family:"+taskType.font+";";
}
)};
and the html to use the regular style tag with a bind:
以及使用带有绑定的常规样式标记的 html：
<div class="form-control" id="data.objectStyle"
ng-model="data.type" style="{{getStyle(data.objectStyle)}}">
