web-dev-qa-db-fra.com

Appliquer l'attribut de style CSS de manière dynamique dans Angular JS

Cela devrait être un problème simple, mais je n'arrive pas à trouver une solution.

J'ai le balisage suivant:

<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>

J'ai besoin que la couleur de fond soit liée à la portée, alors j'ai essayé ceci:

<div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div>

Cela n'a pas fonctionné, j'ai donc fait quelques recherches et trouvé ng-style, mais cela n'a pas fonctionné. J'ai donc essayé de prendre la partie dynamique et de coder en dur le style dans ng-style, comme ceci ...

<div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div>

et cela ne fonctionne même pas. Est-ce que je comprends mal comment fonctionne ng-style? Existe-t-il un moyen de placer {{data.backgroundCol}} dans un attribut de style brut et de le forcer à insérer la valeur?

javascriptangularjsng-style
110
jonhobbs

ngStyle directive vous permet de définir le style CSS de façon dynamique sur un élément HTML.

Expression qui correspond à un objet dont les clés sont des noms de style CSS et les valeurs sont des valeurs correspondantes pour ces clés CSS. Certains noms de styles CSS n'étant pas des clés valides pour un objet, ils doivent être cités. 

ng-style="{color: myColor}"

Votre code sera:

<div ng-style="{'width':'20px', 'height':'20px', 'margin-top':'10px', 'border':'solid 1px black', 'background-color':'#ff0000'}"></div>

Si vous souhaitez utiliser des variables de portée:

<div ng-style="{'background-color': data.backgroundCol}"></div>

Ici un exemple sur fiddle qui utilise ngStyle, et sous le code avec l'extrait de code en cours d'exécution:

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
  $scope.items = [{
      name: 'Misko',
      title: 'Angular creator'
    }, {
      name: 'Igor',
      title: 'Meetup master'
    }, {
      name: 'Vojta',
      title: 'All-around superhero'
    }

  ];
});
.pending-delete {
  background-color: pink
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyCtrl' ng-style="{color: myColor}">

  <input type="text" ng-model="myColor" placeholder="enter a color name">

  <div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
    name: {{item.name}}, {{item.title}}
    <input type="checkbox" ng-model="item.checked" />
    <span ng-show="item.checked"/><span>(will be deleted)</span>
  </div>
  <p>
    <div ng-hide="myColor== 'red'">I will hide if the color is set to 'red'.</div>
</div>

185
StarsSky

Le moyen le plus simple consiste à appeler une fonction pour le style et à lui renvoyer le style correct.

<div style="{{functionThatReturnsStyle()}}"></div>

Et dans votre contrôleur:

$scope.functionThatReturnsStyle = function() {
  var style1 = "width: 300px";
  var style2 = "width: 200px";
  if(condition1)
     return style1;
  if(condition2)
     return style2;
}
23
Bennett

Directement à partir de ngStyledocs :

Expression qui correspond à un objet dont les clés sont les noms de style CSS et les valeurs sont des valeurs correspondantes pour ces clés CSS.

<div ng-style="{'width': '20px', 'height': '20px', ...}"></div>

Pour que vous puissiez faire ceci:

<div ng-style="{'background-color': data.backgroundCol}"></div>

J'espère que cela t'aides!

18
jakee

Sur une note générique, vous pouvez utiliser une combinaison de modifications conditionnelles d'incorporation de style ng-if et ng-style avec modification de l'image d'arrière-plan.

<span ng-if="selectedItem==item.id"
      ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>
 <span ng-if="selectedItem!=item.id"
       ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>
14
TS Shriram

Je dirais que vous devriez mettre les styles qui ne changeront pas en un attribut style normal et les styles conditionnels/scope dans un attribut ng-style. De plus, les clés de chaîne ne sont pas nécessaires. Pour les clés CSS délimitées par un tiret, utilisez camelcase. 

<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>
0
omikes