web-dev-qa-db-fra.com

Comment obtenir une règle multi css pour le style ng par fonction?

J'ai besoin d'appliquer la règle multi css à la balise html dans le modèle de formulaire angular.

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

fonction getStyle dans le contrôleur:

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

objet taskType:

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

La fonction getStyle ne renvoie pas de style! Que faire?

cssangularjsng-style
14
sajjad

ÉDITER

Les docs spécifient que vous devez encapsuler vos clés entre guillemets afin qu'elles ne soient pas des clés d'objet JSON non valides:

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

Ancienne réponse (n'utilise pas le style ng)

Bien que je n'aie jamais utilisé style ng , il ne semble pas prendre d'objets. C'est plutôt un équivalent de ng-class mais pour les styles simples.

Essayez de changer votre fonction pour:

$scope.getStyle = function (taskType) {

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

et le html pour utiliser la balise de style régulière avec une liaison:

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