AngularJS манипулирует фоновым изображением, заданным в css

Question

У меня есть список, элементы которого получают фоновое изображение по умолчанию:

.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);
}

Теперь я хочу динамически изменять фоновое изображение с моего контроллера.

шаблон:

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

контроллер:

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
});

Я не знаю, как установить фоновое изображение.Есть какие-нибудь идеи?

Вот такой играть на скрипке ты можешь попробовать.

Answer 1

Вы используете Ionic Framework, который хорош, но добавляет слой, на который трудно ориентироваться.(Тот .item-content DIV нет в вашем шаблоне - похоже, что Ionic предоставляет это...)

Но, несмотря на это, если вы хотите настроить, где в вашем DOM вам нужно это фоновое изображение, его легко установить в Angular.Вы можете использовать атрибут ngStyle, или вы можете просто напрямую использовать выражение в атрибуте style.(У обоих есть преимущества - выражение простое, но ngStyle позволяет выполнять сложные действия с несколькими атрибутами.)

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