Kevin Murphy Kevin Murphy - 3 months ago 37
AngularJS Question

Angular Background Image alterations

I'm making a weather application using JS/HTML/CSS/Angular

I am trying to develop it so that while the weather is set to something then it will alter the background image to match.

Edit:

Here are the two codes I'm using from HTML and JS

In my html file:

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


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


Image is random just to test. Doesn't seem to work for me.

Answer

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

and in the controller, do

    $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+")"}


     }
Comments