角背景圖像改變

-1

我想開發它，這樣雖然天氣設置的東西，然後它會改變的背景圖像，以匹配天氣應用角。

編輯：

這裏有兩個代碼，我從HTML和JS

用在我的HTML文件：

<body ng-app="Weather" ng-style="{'background-image':'url({{newBg}})'}">

在我的JS：

if($scope.Data.des == 'Clear'){ 
    $scope.newBg = 'http://i.stack.imgur.com/mfvI9.jpg'; 
    } 

    if($scope.Data.des == 'Cloudy'){ 
    $scope.newBg = 'http://i.stack.imgur.com/mfvI9.jpg'; 
    }

圖像是隨機的，只是爲了測試。似乎不適合我。

來源

2016-08-18 Kevin Murphy

爲什麼要使用的功能，並在其範圍內？因爲就我所見而言，它在視圖中將會更加昂貴。 –

我正在嘗試使用ng樣式。我被告知ng-style是改變背景圖像的最好方法 –

在css中創建3個具有不同背景的類將會更容易。之後，你只需要做一個ng-class =「{'class1'：Data.des ==''clear'，'class2'：Data.des ==''Cloudy}}，它會更簡單，不要把css和代碼混合在一起 –

做 <body ng-app="Weather" ng-style="{{getStyle()}}">

，並在控制器，請

$scope.getStyle = function(){ 
     var url; 
     if($scope.Data.des == 'Clear'){ 
      url = 'http://i.stack.imgur.com/mfvI9.jpg'; 
     }else if($scope.Data.des == 'Cloudy'){ 
      url = 'http://i.stack.imgur.com/mfvI9.jpg'; 
     } 
     return {"background-image":"url("+url+")"} 


    }

來源

2016-08-19 00:22:02

我完全認爲這會工作..奇怪 –

http://codepen.io/kaymo/pen/NAJOQX 這是一個項目本身的鏈接，如果你能幫助我我認爲不管我在做什麼都會出現問題，這應該會變得更容易 –

請參閱http://codepen.io/anon/pen/bZJwpk?editors=1010#0 –

角背景圖像改變

回答

相關問題