角度背景画像の変更

-1

私は天気が何かに設定されている間、それが一致するように、背景画像を変更するように、それを開発しようとしていますJS/HTML/CSS /アンギュラ角度背景画像の変更

を使用して天気予報アプリケーションを作ってるんです。

編集：私のJSで

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

：

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

ここ

は、私は私のHTMLファイルにHTMLとJSから

を使用している2つのコードがあります画像はテストするだけでランダムです。私にとってはうまくいかないようです。

出典

2016-08-18 Kevin Murphy

はなぜ機能とコンテキストで使用するのですか？私が見ているように、それはビューのngクラスでより洗練されたものになるでしょう。 –

ng-styleを使用しようとしています。私はng-styleが背景画像を変更する最良の方法だと言われました –

あなたのCSSのdifferents背景を持つ3つのクラスを作成する方が簡単になります。その後、あなたは単にng-class = "{'class1'：Data.des == '' clear '' class2 '：Data.des ==' 'Cloudy'}}を作成する必要があります。コードとコードを混在させないでください –

<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

私はまったくこれがうまくいくと思っていました.. Strange。 –

http://codepen.io/kaymo/pen/NAJOQX 私がそれを助けることができるなら、ここにプロジェクトへのリンクがあります私がやっていることに何か間違っていると思います。これはもっと簡単になるはずです –

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

角度背景画像の変更

答えて

関連する問題