Aplicar el atributo de estilo CSS dinámicamente en Angular JS

Este debería ser un problema simple, pero parece que no puedo encontrar una solución.

Tengo el siguiente marcado:

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

Necesito que el color de fondo esté vinculado al alcance, así que probé esto:

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

Eso no funcionó, así que investigué un poco y encontré ng-style, pero eso no funcionó, así que intenté sacar la parte dinámica y simplemente codificar el estilo ng-style, así ...

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

y eso ni siquiera funciona. ¿Estoy entendiendo mal cómo ng-stylefunciona? ¿Hay alguna forma de poner {{data.backgroundCol}}en un atributo de estilo simple y hacer que inserte el valor?

La directiva ngStyle le permite establecer el estilo CSS en un elemento HTML de forma dinámica.

Expresión que evalúa un objeto cuyas claves son nombres de estilo CSS y los valores son valores correspondientes para esas claves CSS. Dado que algunos nombres de estilo CSS no son claves válidas para un objeto, se deben citar.

ng-style="{color: myColor}"

Tu código será:

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

Si desea utilizar variables de alcance:

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

Aquí un ejemplo de violín que usa ngStyle, y debajo del código con el fragmento en ejecución:

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>

La forma más sencilla es llamar a una función para el estilo y hacer que la función devuelva el estilo correcto.

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

Y en tu controlador:

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

Directamente desde ngStyle docs :

Expresión que evalúa un objeto cuyas claves son nombres de estilo CSS y los valores son valores correspondientes para esas claves CSS.

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

Entonces podrías hacer esto:

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

¡Espero que esto ayude!

En una nota genérica, puede usar una combinación de ng-if y ng-style para incorporar cambios condicionales con cambio en la imagen de fondo.

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

Yo diría que debería poner estilos que no cambiarán en un styleatributo regular y estilos condicionales / de alcance en un ng-styleatributo. Además, las claves de cadena no son necesarias. Para claves CSS delimitadas por guiones, use camelcase.

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

Simplemente haz esto:

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