嵌套ng-repeat

我有一些虚拟的XML文件：

<Week number="2013-W45"> <Day dow="1" templateDay="Monday"> <Job name="wake up" > <Job name="get dressed" > <Job name="prepare breakfast" > <Job name="eat breakfast" > </Job> </Job> </Job> </Job> <Job name="work 9-5" > </Job> </Day> <Day dow="2" templateDay="Tuesday" > <Job name="wake up" > <Job name="get dressed" > <Job name="prepare breakfast" > <Job name="eat breakfast" > </Job> </Job> </Job> </Job> <Job name="work 9-5" > </Job> <Job name="football" > </Job> </Day> <Day dow="3" templateDay="Wednesday" > <Job name="wake up" > <Job name="get dressed" > <Job name="prepare breakfast" > <Job name="eat breakfast" > </Job> </Job> </Job> </Job> <Job name="work 9-5" > </Job> </Day> <Day dow="4" templateDay="Thursday" > <Job name="wake up" > <Job name="get dressed" > <Job name="prepare breakfast" > <Job name="eat breakfast" > </Job> </Job> </Job> </Job> <Job name="work 9-5" > </Job> <Job name="football" > </Job> </Day> <Day dow="5" templateDay="Friday" > <Job name="go to pub" > </Job> </Day> <Day dow="6" templateDay="Saturday" > <Job name="work 9-5" > </Job> </Day> <Day dow="7" templateDay="Sunday" > <!-- nothing to do on sunday --> </Day> </Week> 

使用这个库http://code.google.com/p/x2js/我把它转换成json，到variablesmyData

  { "Week" : { "Day" : [{ "Job" : [{ "Job" : { "Job" : { "Job" : { "_name" : "eat breakfast" }, "_name" : "prepare breakfast" }, "_name" : "get dressed" }, "_name" : "wake up" }, { "_name" : "work 9-5" } ], "_dow" : "1", "_templateDay" : "Monday" }, { "Job" : [{ "Job" : { "Job" : { "Job" : { "_name" : "eat breakfast" }, "_name" : "prepare breakfast" }, "_name" : "get dressed" }, "_name" : "wake up" }, { "_name" : "work 9-5" }, { "_name" : "football" } ], "_dow" : "2", "_templateDay" : "Tuesday" }, { "Job" : [{ "Job" : { "Job" : { "Job" : { "_name" : "eat breakfast" }, "_name" : "prepare breakfast" }, "_name" : "get dressed" }, "_name" : "wake up" }, { "_name" : "work 9-5" } ], "_dow" : "3", "_templateDay" : "Wednesday" }, { "Job" : [{ "Job" : { "Job" : { "Job" : { "_name" : "eat breakfast" }, "_name" : "prepare breakfast" }, "_name" : "get dressed" }, "_name" : "wake up" }, { "_name" : "work 9-5" }, { "_name" : "football" } ], "_dow" : "4", "_templateDay" : "Thursday" }, { "Job" : { "_name" : "go to pub" }, "_dow" : "5", "_templateDay" : "Friday" }, { "Job" : { "_name" : "work 9-5" }, "_dow" : "6", "_templateDay" : "Saturday" }, { "_dow" : "7", "_templateDay" : "Sunday" } ], "_number" : "2013-W45" } } 

日可以有任何数量的作业，作业可以嵌套并包含任何数量的其他作业。

现在使用这个代码

 <p ng-repeat="day in myData.Week.Day"> {{day._dow}} - {{day._templateDay}} </p> 

我可以列出那些工作的日子。 我希望用下面的代码

 <p ng-repeat="day in myData.Week.Day"> {{day._dow}} - {{day._templateDay}} <span ng-repeat="job in day.Job"> {{job._name}} <span/> </p> 

我可以列出那天的天和最高级别的工作，但它不起作用。 （要列出嵌套的Jobs将是下一个任务，而不是现在询问）。

那么，如何列出至less顶级的乔布斯呢？ 另外在JSON格式中，我看到有些作业是Objects ，有些是Arrays 。 如何处理这两种情况？

PS .:使用angular1.2.0-rc.3

Answer 1

最好是有一个适当的JSON格式，而不是直接使用从XML转换的格式。

 [ { "number": "2013-W45", "days": [ { "dow": "1", "templateDay": "Monday", "jobs": [ { "name": "Wakeup", "jobs": [ { "name": "prepare breakfast", } ] }, { "name": "work 9-5", } ] }, { "dow": "2", "templateDay": "Tuesday", "jobs": [ { "name": "Wakeup", "jobs": [ { "name": "prepare breakfast", } ] } ] } ] } ] 

这将使事情变得更容易，更容易循环。

现在你可以把循环写成 –

 <div ng-repeat="week in myData"> <div ng-repeat="day in week.days"> {{day.dow}} - {{day.templateDay}} <b>Jobs:</b><br/> <ul> <li ng-repeat="job in day.jobs"> {{job.name}} </li> </ul> </div> </div> 

Answer 2

如果您有一个大的嵌套JSON对象并在多个屏幕上使用它，则在加载页面时可能会遇到性能问题。 我总是去个别JSON对象，并查询相关的对象作为延迟加载只在需要的地方。

你可以用ng-init来实现它

 <td class="lectureClass" ng-repeat="s in sessions" ng-init='presenters=getPresenters(s.id)'> {{s.name}} <div class="presenterClass" ng-repeat="p in presenters"> {{p.name}} </div> </td> 

控制器端的代码应该如下所示

 $scope.getPresenters = function(id) { return SessionPresenters.get({id: id}); }; 

而API工厂如下：

 angular.module('tryme3App').factory('SessionPresenters', function ($resource, DateUtils) { return $resource('api/session.Presenters/:id', {}, { 'query': { method: 'GET', isArray: true}, 'get': { method: 'GET', isArray: true }, 'update': { method:'PUT' } }); }); 

Answer 3

创build一个不会在页面上呈现的虚拟标记，但它将作为ng-repeat的持有者：

 <dummyTag ng-repeat="featureItem in item.features">{{featureItem.feature}}</br> </dummyTag>