Question

基本上我现在正在做的是调用一个jsonp数组，其中包含一个图标的图像网址，该图标工作正常并且显示正常，除了图标很糟糕。我想要做的是用我自己的图标替换图标，但问题是它们是动态的，因为它是一个天气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>

Answer 1

您可以编写一个帮助器function，它将在每次成功的ajax请求后重写json中的url属性。请提供更多信息，以便我们为您提供帮助。

角度图像条件

1 个答案: