Appliquer dynamiquement l'attribut de style CSS 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 d'arrière-plan 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é, alors j'ai fait des recherches et trouvé ng-style, mais cela n'a pas fonctionné, alors j'ai essayé de supprimer la partie dynamique et de coder en dur le style ng-style, comme ça ...

<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. Suis-je mal compris comment ng-stylefonctionne? Existe-t-il un moyen de mettre {{data.backgroundCol}}dans un attribut de style simple et de le faire insérer la valeur?

La directive ngStyle vous permet de définirdynamiquement le style CSS sur un élément HTML.

Expression qui évalue à un objet dont les clés sont des noms de style CSS et les valeurs sont des valeurs correspondantes pour ces clés CSS. Étant donné que certains noms de style CSS ne sont pas des clés valides pour un objet, ils doivent être entre guillemets.

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>

Voici un exemple sur le violon qui utilise ngStyle, et ci-dessous 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>

Le moyen le plus simple consiste à appeler une fonction pour le style et à demander à la fonction de 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;
}

Directement à partir de la ngStyle documentation :

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

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

Vous pouvez donc faire ceci:

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

J'espère que cela t'aides!

Sur une note générique, vous pouvez utiliser une combinaison de ng-if et ng-style incorporer des modifications conditionnelles avec changement 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>

Je dirais que vous devriez mettre des styles qui ne changeront pas en un styleattribut normal et des styles conditionnels / de portée dans un ng-styleattribut. De plus, les clés de chaîne ne sont pas nécessaires. Pour les clés CSS séparées par des tirets, utilisez camelcase.

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

Faites simplement ceci:

<div ng-style="{'background-color': '{{myColorVariable}}', height: '2rem'}"></div>