Question

解决：

这是我第一次使用AngularJS尝试REST来显示用户的位置以及JSON数据中的一些必需数据（嵌套项）。

我正在点击此网址：http://muslimsalat.com/daily.json?callback=JSON_CALLBACK

我需要以列表方式显示以下数据，这是一个嵌套项目：

"items":[
        {
            "date_for": "2014-5-5",
            "fajr": "4: 10am",
            "shurooq": "5: 36am",
            "dhuhr": "12: 15pm",
            "asr": "3: 43pm",
            "maghrib": "6: 55pm",
            "isha": "8: 25pm"
        }]

以及以下显示位置的信息。

{
    "city": "XX",
    "country": "XX",
}

AngularJS：

var App = angular.module('MyRESTApp',[]);
App.controller("myRestCntrl",function  ($scope, $http) {
var locationURL = "http://muslimsalat.com/daily.json" + "?callback=JSON_CALLBACK";
$http.jsonp(locationURL).
success(function(data)
{
 $scope.myLocation = data;
 });
});

HTML：

<div ng-app="MyRESTApp">
<div ng-controller="myRestCntrl">
//ng-repeat here for items
<ul>
<li>Date:{{}}</li>
<li>Fajr:{{}}</li>
//more li
</ul>
</div>
</div>

请告诉我如何循环上述JSON URL的嵌套项目和位置。

Answer 1

你正在寻找ng-repeat。请阅读并按照以下示例进行操作：

https://docs.angularjs.org/api/ng/directive/ngRepeat

如果您仍然遇到问题，请设置一个plunker，这样我们就会发现错误。

Answer 2

解决：

<div class="container" ng-controller="namazTimesCtrl">
<ul ng-repeat="item in myLocation.items">
<li>
Date - {{item.date_for}}
</li>
<li>    
Fajr - {{item.fajr}} 
</li>
</ul>
</div>

在AngularJS中显示嵌套的JSON项

2 个答案: