如何通过函数获取ng-style的多css规则？ [英] How to get multi css rule for ng-style by function?

问题描述

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

I need for apply multi css rule to html tag in angular form template.

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

控制器中的getStyle函数：

getStyle function in controller :

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

taskType对象：

taskType object:

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

getStyle 函数返回风格！该怎么办？

The getStyle function does not return a style! What to do?

推荐答案

EDIT

docs 指定您需要将键包含在引号中，以使它们不是无效的JSON对象键：

EDIT

The docs specify that you need to wrap your keys in quotation marks so they aren't invalid JSON object keys:

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

---

旧答案（不使用ng风格）

虽然我从未使用过 ng-style ，但它似乎没有使用对象。

---

Old Answer (not using 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.

尝试将您的函数更改为：

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+";";
    }
)};

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

and the html to use the regular style tag with a bind:

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

这篇关于如何通过函数获取ng-style的多css规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！