javascript - Angular Image Conditions -

javascript - Angular Image Conditions -

bascially doing @ moment calling jsonp array contains image url icon works fine , displays fine except icons suck. want replace icons own problem dynamic weather api icon link alter different icon when weather changes. can json status of weather eg partially cloudy , utilize somehow phone call specific img. how go in angular 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 }, ] }); });

here 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 , 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>

you can write helper function rewrite url property in json after each succeeded ajax request. please provide more informations, can help you.

javascript json angularjs