角度图像条件

Angular Image Conditions

本文关键字:条件 图像      更新时间:2023-09-26

我目前正在做的基本工作是调用一个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>

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