AngularJSは、CSSで設定された背景画像を操作します

StackOverflow https://stackoverflow.com//questions/25081280

  •  02-01-2020
  •  | 
  •  

質問

デフォルトの背景画像を取得する項目があります。

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

背景画像の設定方法がわかりません。任意のアイデア？

これは fiddle

役に立ちましたか？

解決

あなたはあなたがイオン性フレームワークを使っていますが、それは細かいがターゲットが難しい層を追加します。（.item-content DIVはあなたのテンプレートにはありません - イオンを提供しているように見えます...）

しかし関係に関係なく、あなたがあなたのDOMのどこにこの背景画像を必要とするのかを調整しても構わないと思っているならば、それはそれらを角度で設定するのは簡単です。NGSTYLE属性を使用することも、スタイル属性で直接式を使用するだけです。（両方の表現は簡単ですが、NGSTYLEは複数の属性で複雑なものをすることができます。）

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top