角度圖像條件

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

角度圖像條件

回答

相關問題