Applica l'attributo di stile CSS dinamicamente in Angular JS

Questo dovrebbe essere un problema semplice, ma non riesco a trovare una soluzione.

Ho il seguente markup:

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

Ho bisogno che il colore di sfondo sia vincolato all'ambito, quindi ho provato questo:

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

Non ha funzionato, quindi ho fatto qualche ricerca e ho trovato ng-style, ma non ha funzionato, quindi ho provato a togliere la parte dinamica e semplicemente a codificare lo stile ng-style, in questo modo ...

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

e questo non funziona nemmeno. Sto fraintendendo come ng-stylefunziona? C'è un modo per inserire {{data.backgroundCol}}un semplice attributo di stile e fargli inserire il valore?

La direttiva ngStyle consente di impostare lostile CSS su un elemento HTML in modo dinamico.

Espressione che valuta un oggetto le cui chiavi sono nomi di stile CSS e i valori sono valori corrispondenti per quelle chiavi CSS. Poiché alcuni nomi di stile CSS non sono chiavi valide per un oggetto, devono essere citati.

ng-style="{color: myColor}"

Il tuo codice sarà:

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

Se desideri utilizzare le variabili di ambito:

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

Ecco un esempio sul violino che usa ngStylee sotto il codice con lo snippet in esecuzione:

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>

Il modo più semplice è chiamare una funzione per lo stile e fare in modo che la funzione restituisca lo stile corretto.

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

E nel tuo controller:

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

Direttamente dai ngStyle documenti :

Espressione che valuta un oggetto le cui chiavi sono nomi di stile CSS e i valori sono valori corrispondenti per quelle chiavi CSS.

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

Quindi potresti fare questo:

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

Spero che questo ti aiuti!

In una nota generica, puoi usare una combinazione di ng-if e ng-style incorporare modifiche condizionali con cambiamento nell'immagine di sfondo.

<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>

Direi che dovresti inserire gli stili che non cambieranno in un styleattributo normale e gli stili condizionali / di ambito in un ng-styleattributo. Inoltre, le chiavi stringa non sono necessarie. Per le chiavi CSS delimitate da trattini, utilizza camelcase.

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

Fai semplicemente questo:

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