Question

与我发布的另一个问题类似，我遇到了抓住本周天气并分配不同行的问题。基本上我想要的格式是：

        Mon       Tues        Wed          Thurs

悉尼25 21 21 22

墨尔本26 18 21 24

等不幸的是，它正在抓住阵列的第一部分并将其应用到所有区域。

这是我的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

我看到的问题是：

您在代码中致电 {{getForcast（）}}
如何设置 getForcast 。
ng-repeat in your 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-repeat中有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);
        }
    }
}

我希望这可以帮助您解决问题。

JSONP角度js显示多个对象

1 个答案: