2016-08-18 3 views
-1

Я делаю приложение погоды с помощью JS/HTML/CSS/УгловоеУгловые изменения фона изображения

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

Edit:

Вот два кода я использую из 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'; 
    } 

Изображение случайное только для проверки. Кажется, не работает для меня.

+0

Зачем использовать функции и в каком контексте? Поскольку, как я вижу, это будет esaier с ng-классом в представлении. –

+0

Я пытаюсь использовать ng-стиль. Мне сказали, что ng-стиль - лучший способ изменить фоновое изображение. –

+0

Будет проще создать 3 класса с разным фоном в вашем css. После этого вам просто нужно сделать ng-class = "{'class1': Data.des == '' clear ',' class2 ': Data.des ==' 'Cloudy'}. Это будет проще, и вы не смешивайте css с кодом –

ответ

0

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


    } 
+0

Я полностью думал, что это сработает .. Странно. –

+0

http://codepen.io/kaymo/pen/NAJOQX Вот ссылка на сам проект, если бы вы могли мне помочь было бы здорово. Я думаю, что что-то не так с тем, что я делаю. Это должно быть намного проще, чем стало –

+0

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

Смежные вопросы