角度:如何在控制器中循环遍历 JSON 并在视图中显示
Angular: how to loop through JSON in controller and display in view
我正在学习一个Angular,我被困在一项任务上。我的应用程序中有三个部分,一个视图、服务和控制器,视图如下所示:
<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;
});
}]);
本课程的数据取自此处的其余 api http://api.openweathermap.org/data/2.5/forecast/city?q=Warsaw&units=metric&mo
我怎样才能抛出所有这些 json resposne 并显示来自这个 json 的数组"列表"中的所有项目,例如看起来像这样:
日期: "2015-06-12 15:00:00"描述: 《几朵云》温度: 26.82压力: 1015.2
正如我看到它的简单JSON,你可以使用.
遍历它,并在需要时提及它index
以获取值。
法典
$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>
不同的角度日期筛选器格式
相关文章:
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 发送json对象或使用express路由呈现视图
- 使用javascript在MVC视图中解析.net JSON字符串
- JSON范围的更改没有反映在angularjs中的视图中
- 自定义筛选器不'我不使用django数据表视图创建的ajax.data.Json
- 如何在视图中显示json返回的linq列表
- 如何使用不同视图的JSON对象更新angular js中的全局JSON字段
- 将JSON REST请求加载到Kendo ui列表视图中的问题
- onclick在视图中显示重复的json结果
- 如何从JSON数组中获取数据并将其放入列表视图中
- 如何将 json 数据发送到代码点火器视图
- 将 JSON 数据从控制器传递到指令并显示在视图中
- 如何在网页上存储记录 (json) 并仅在“视图”上的记录上显示
- 挖空,映射后从视图模型获取 JSON
- 如何将嵌套的JSON / C#数组加载到视图模型中?使用Knockout,jQuery
- 如何在 android 中的可扩展列表视图组和子项中加载 json 数据
- WebAPI 控制器在通过 jQuery 调用时重定向到原始 JSON 视图
- 查看 json,然后单击该 json 中的 links.json,并将其替换为当前 json 视图
- 为什么Byte[]在JSON视图中被转换为字符串
- 金字塔json视图ajax调用