AngularJs manipula la imagen de fondo en CSS

Question

Tengo una lista de los artículos que obtienen una imagen de fondo predeterminada:

.defaultListItem > .item-content  {
    background: linear-gradient(rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.2),rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('../images/BGCardboard.png') no-repeat;
    background-size: cover;
    color: rgb(255,255,255);
}

Ahora quiero cambiar la imagen de fondo dinámicamente de mi controlador.

plantilla:

<ion-item class="defaultListItem" ng-repeat="item in items >
     <img ng-src="item.img">
           <div class="itemInfo">
               ....
           </div>
</ion-item>

controlador:

app.controller('home', function($scope, $items){
     $scope.items = $items.getItems();

     //check items, and if there's a background-image, set it to the list
     for(item in items)
          if(item.backgroundImage)
              //manipulate css background-image anyhow
});

No sé cómo configurar la imagen de fondo.¿Alguna idea?

Aquí hay una Fiddle Puede probar.

Answer 1

Está utilizando el marco iónico, que está bien, pero agrega una capa que es difícil de dirigir.(El .item-content DIV no está en su plantilla: parece que Ionic está proporcionando este ...)

Pero, independientemente, si está dispuesto a ajustar dónde, en su dom, necesita esta imagen de fondo, es fácil configurarlas en angular.Puede usar el atributo de Ngstyle, o simplemente puede usar una expresión en el atributo de estilo directamente.(Hay ventajas para ambas: la expresión es simple, pero NGSTYLE le permite hacer cosas complejas con múltiples atributos).

<div style="background-image: url({{ myImageUrl }})"></div>