Javascript 角度：如何在控制器中循环JSON并在视图中显示_Javascript_Jquery_Arrays_Json_Angularjs

Javascript 角度：如何在控制器中循环JSON并在视图中显示

javascript jquery arrays json angularjs

Javascript 角度：如何在控制器中循环JSON并在视图中显示,javascript,jquery,arrays,json,angularjs,Javascript,Jquery,Arrays,Json,Angularjs,我正在学习一个角度，我被一个任务困住了。我的应用程序中有三个部分：视图、服务和控制器，视图如下所示： <body ng-app="ForecastApp"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <p class="navbar-brand">Week Forecast<

我正在学习一个角度，我被一个任务困住了。我的应用程序中有三个部分：视图、服务和控制器，视图如下所示：

<body ng-app="ForecastApp">

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">

          <p class="navbar-brand">Week Forecast</p>

      </div>
    </nav>

    <div class="container-fluid"  class="main" ng-controller="MainController">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <h2><span class="label label-info">Search for a City</span></h2>
          <div class="input-group">

            <input type="text" class="form-control" placeholder="City name...">
              <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
          </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">{{ fiveDay.city.name }}</h1>

          <div class="forecast" ng-repeat="day in fiveDay.days">

              </div>
              </div>

        </div>
      </div>
    </div>
</body>

app.factory('forecast', ['$http', function($http) { 
  return $http.get('http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {

  forecast.success(function(data) { 
    $scope.fiveDay = data; 
  });

}]);

控制器如下所示：

<body ng-app="ForecastApp">

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">

          <p class="navbar-brand">Week Forecast</p>

      </div>
    </nav>

    <div class="container-fluid"  class="main" ng-controller="MainController">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <h2><span class="label label-info">Search for a City</span></h2>
          <div class="input-group">

            <input type="text" class="form-control" placeholder="City name...">
              <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
          </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">{{ fiveDay.city.name }}</h1>

          <div class="forecast" ng-repeat="day in fiveDay.days">

              </div>
              </div>

        </div>
      </div>
    </div>
</body>

app.factory('forecast', ['$http', function($http) { 
  return $http.get('http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {

  forecast.success(function(data) { 
    $scope.fiveDay = data; 
  });

}]);

本课程的数据取自此处的RESTAPI

如何抛出所有json响应并显示该json中数组“list”中的所有项，例如如下所示：

<body ng-app="ForecastApp">

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">

          <p class="navbar-brand">Week Forecast</p>

      </div>
    </nav>

    <div class="container-fluid"  class="main" ng-controller="MainController">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <h2><span class="label label-info">Search for a City</span></h2>
          <div class="input-group">

            <input type="text" class="form-control" placeholder="City name...">
              <span class="input-group-btn">
            <button class="btn btn-default" type="button">Go!</button>
          </span>
          </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
          <h1 class="page-header">{{ fiveDay.city.name }}</h1>

          <div class="forecast" ng-repeat="day in fiveDay.days">

              </div>
              </div>

        </div>
      </div>
    </div>
</body>

app.factory('forecast', ['$http', function($http) { 
  return $http.get('http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo') 
            .success(function(data) { 
              return data; 
            }) 
            .error(function(err) { 
              return err; 
            }); 
}]);

app.controller('MainController', ['$scope', 'forecast', function($scope, forecast) {

  forecast.success(function(data) { 
    $scope.fiveDay = data; 
  });

}]);

日期：“2015-06-12 15:00:00” 描述：“少云” 温度：26.82

压力：1015.2

正如我看到的简单JSON一样，您可以使用

&在需要时提及

索引

，以获取值

代码

$scope.fiveDays = data.list

标记

<div class="forecast" ng-repeat="day in fiveDays ">
   <div>Date : {{dt|date: 'yyyy-dd-MM'}}</div>
   <div>description: {{weather[0].description}}</div>
   <div>temp: {{main.temp}}</div>
   <div>pressure: {{main.pressure}}</div>
</div>


日期：{dt|Date:'yyyyy-dd-MM'}
描述：{{天气[0]。描述}
温度：{{main.temp}
压力：{{main.pressure}

不同的

请发布JSON。@TheHeadlush here:该JSON响应没有

days

属性，有一个

列表

属性，您想在其中使用它吗？