角度图像条件

Bascially我现在在做的是调用一个jsonp数组，其中包含一个图标的图像url，它可以很好地工作，并且显示除了图标以外的很好的图标。我想要做的是用我自己的图标替换图标，但问题是它们是动态的，因为它的天气api，所以图标链接将在天气变化时更改为不同的图标。我能从json得到的是天气状况，例如部分阴天，并用它来调用特定的img。我将如何去角质js？角度图像条件

var app=angular.module('app'); 

app.controller('MainCtrl', function($scope, $http) { 


    $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Melbourne.json?callback=JSON_CALLBACK').success(function(data){ 

    $scope.currentMelbourne=data; 



    }); 
    $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Sydney.json?callback=JSON_CALLBACK').success(function(data){ 

    $scope.currentSydney=data; 



    }); 

    $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Adelaide.json?callback=JSON_CALLBACK').success(function(data){ 

    $scope.currentAdelaide=data; 



    }); 
    $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Darwin.json?callback=JSON_CALLBACK').success(function(data){ 

    $scope.currentDarwin=data; 



    }); 

    $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Perth.json?callback=JSON_CALLBACK').success(function(data){ 

    $scope.currentPerth=data; 



    }); 

    $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Cairns.json?callback=JSON_CALLBACK').success(function(data){ 

    $scope.currentCairns=data; 



    }); 


    $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/conditions/q/Australia/Brisbane.json?callback=JSON_CALLBACK').success(function(data){ 


    $scope.currentBrisbane=data; 
    $scope.cityData=[ 
    { name:'Brisbane', 
     temp:$scope.currentBrisbane.current_observation.temp_c, 
     image:$scope.currentBrisbane.current_observation.icon 
     },    

     { name:'Melbourne', 
     temp:$scope.currentMelbourne.current_observation.temp_c, 
      image:$scope.currentMelbourne.current_observation.icon 

     }, 

    { 
     name:'Adelaide', 
     temp:$scope.currentAdelaide.current_observation.temp_c , 
     image:$scope.currentAdelaide.current_observation.icon 


     }, 

    { name:'Darwin', 
     temp:$scope.currentDarwin.current_observation.temp_c , 
     image:$scope.currentDarwin.current_observation.icon 


     }, 

    { name:'Perth', 
     temp:$scope.currentPerth.current_observation.temp_c , 
     image:$scope.currentPerth.current_observation.icon 


    }, 

    { name:'Cairns', 

     temp:$scope.currentCairns.current_observation.temp_c, 
     image:$scope.currentCairns.current_observation.icon 

    }, 
    ] 




    }); 





});

下面是HTML

<div id="weather-container"> 

     <div id="current-weather"> 
      <!--Angular JSON pull --> 
      <div id="title"><span id="current-title">Current Weather</span></div> 
      <div id="current-condition">{{currentSydney.current_observation.weather}}</div> 
      <!--Image thingo here--> 
      <img ng-src="{{currentSydney.current_observation.icon_url}}"></img> 
      <div id="current-temp"><span id="current-temp"> {{currentSydney.current_observation.temp_c}} </span></div> 
      <span id="current-city">{{currentSydney.current_observation.display_location.city}} </span> 
     </div> 






      <!--Angular JSON pull and iteration--> 
     <div id="other-city-container"> 
      <div class="other-city-weather" ng-repeat="city in cityData" > 
       <!--Image thingo here--> 
      <img ng-src="{{city.image}}"></img> 
      <div class="current-city-temp"> 
       <span>{{city.temp}}</span> 
      </div> 
      <div class="current-city-lower"> 
       <span>{{city.name}}</span> 
      </div> 
      </div> 


     </div> 


    </div>

来源

2014-10-09 Indrick

你想我显示我的代码吗？ – Indrick 2014-10-09 05:43:09

图像区域返回一个字符串，它是当前天气状况，例如局部多云 – Indrick 2014-10-09 05:45:14

你可以写一个帮手function这将改写你的JSON url属性后，每个成功的Ajax请求。请提供更多信息，以便我们为您提供帮助。

来源

2014-10-09 05:56:57

所有好的数字 – Indrick 2014-10-09 06:03:15

角度图像条件

回答

相关问题