JSONP角度js顯示多個對象

Question

類似於我發佈的另一個問題，我有一個問題，抓住一週的天氣和分配不同的行。基本上我想要的格式是：

 Mon  Tues  Wed   Thurs  

悉尼25 21 21 22

墨爾本26 18 21 24

等 不幸它被抓住所述陣列的所述第一部分和coppying該所有區域。

這裏是我的JS：

app.controller('forecastCtrl',function($scope, $http){ 
$scope.weatherDataSydney = null; 
    $scope.weatherDataBrisbane = null; 
    $scope.weatherDataPerth = null; 
    $scope.weatherDataMelbourne = null; 
    $scope.weatherDataAdelaide = null; 
    $scope.weatherDataDarwin = null; 



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


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

    }); 
    $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/Australia/Melbourne.json?callback=JSON_CALLBACK').success(function(data){ 
    $scope.weatherDataMelbourne=data; 
    }); 
    $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/Australia/Perth.json?callback=JSON_CALLBACK').success(function(data){ 
    $scope.weatherDataPerth=data; 
    }); 
     $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/Australia/Darwin.json?callback=JSON_CALLBACK').success(function(data){ 
    $scope.weatherDataDarwin=data; 
    }); 

     $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/Australia/Cairns.json?callback=JSON_CALLBACK').success(function(data){ 
    $scope.weatherDataCairns=data; 
    }); 
     $http.jsonp('http://api.wunderground.com/api/5ad0204df4bdbeff/forecast/q/Australia/Adelaide.json?callback=JSON_CALLBACK').success(function(data){ 
     $scope.weatherDataAdelaide=data; 


    $scope.cityForecasts=[ 
     { name:'Sydney', 
      high: $scope.weatherDataSydney.forecast.simpleforecast.forecastday 
     }, 


    { name:'Brisbane', 
     high: $scope.weatherDataBrisbane.forecast.simpleforecast.forecastday 
     },    

     { name:'Melbourne', 
     high: $scope.weatherDataMelbourne.forecast.simpleforecast.forecastday 

     }, 

    { 
     name:'Adelaide', 
     high: $scope.weatherDataAdelaide.forecast.simpleforecast.forecastday 


     }, 

    { name:'Darwin', 
     high: $scope.weatherDataDarwin.forecast.simpleforecast.forecastday 


     }, 

    { name:'Perth', 
     high: $scope.weatherDataPerth.forecast.simpleforecast.forecastday 


    }, 

    { name:'Cairns', 
     high: $scope.weatherDataCairns.forecast.simpleforecast.forecastday 


    }, 
    ] 

    }); 

    $scope.getForecast = function() { 
     for(i=1; i < 2; i++){ 
     for(x=0;x<1;x++){ 
     return($scope.cityForecasts[i].high[x].high.celsius); 
    } 
    } 



     } 






}); 

下面是HTML

<div id="forecast-container"> 

    <div class="forecast" ng-repeat="cityForecast in cityForecasts"> 
     <div class="city-forecast"> 
      <span>{{cityForecast.name}}</span> 
     </div> 

     <div class="list-days"> 
      <ul class="day"> 
       <li id="day1">Mon</li> 
       <li id="day2">Tues</li> 
       <li id="day3">Wed</li> 
       <li id="day4">Thur</li> 


      </ul> 

     </div> 
     <div class="temp-list"> 
      <ul > 
       <li class="temp" ng-repeat="forecast in weatherDataSydney.forecast.simpleforecast.forecastday"> 

       {{getForecast()}} 
       </li> 

      </ul> 
     </div> 
    </div> 

Answer 1

我看到的是問題：

1. 你在哪裏調用{{ getForcast（）}}代碼
2. 如何設置getForcast。
3. NG-重複在你的HTML

實際上，你可以直接在HTML中解決的問題（我假設你的對象結構）。

最終的HTML：

<div id="forecast-container"> 
    <div class="forecast" ng-repeat="cityForecast in cityForecasts"> 
     <div class="city-forecast"> 
      <span>{{cityForecast.name}}</span> 
     </div> 
     <div class="list-days"> 
      <ul class="day"> 
       <li id="day1">Mon</li> 
       <li id="day2">Tues</li> 
       <li id="day3">Wed</li> 
       <li id="day4">Thur</li> 
      </ul> 
     </div> 
     <div class="temp-list"> 
      <ul > 
       <li class="temp" ng-repeat="forecast in cityForecast.high"> 
        {{ forecast.celsius }} 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 

既然你在你的NG-重複有cityForecast，所有你需要做的是循環cityForecast.high（假設cityForecast.high是一個數組）。

以前，你有這樣的HTML：

<ul > 
    <li class="temp" ng-repeat="forecast in weatherDataSydney.forecast.simpleforecast.forecastday"> 
     {{getForecast()}} 
    </li> 
</ul> 

你只從weatherDataSydney（這仍然不是你看到確切的問題）循環的預測，但如果我們看的getForecast（）

$scope.getForecast = function() { 
    //only running once 
    for(i=1; i < 2; i++){ 
     //only running once 
     for(x=0;x<1;x++){ 
      //This would be returning the same statement (below) every single time getForecast was called 
      //return($scope.cityForecasts[1].high[0].high.celsius); 
      //which would always be equal to Brisbane's temp (per the code you posted) 
      return($scope.cityForecasts[i].high[x].high.celsius); 
     } 
    } 
} 

我希望這可以幫助您解決問題。