嵌套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

3 Solutions collect form web for “嵌套ng-repeat”

最好是有一个适当的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> 

如果您有一个大的嵌套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' } }); }); 

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

 <dummyTag ng-repeat="featureItem in item.features">{{featureItem.feature}}</br> </dummyTag> 
  • JSON和Object Literal Notation有什么区别?
  • 在JSON转换为CSV期间保持JSON密钥的顺序
  • 如何使用NSURLSession在Swift中parsingJSON
  • 在Spring中configurationObjectMapper
  • 在C#中增量式JSONparsing
  • 取一个JSONstring,将其解组成一个map interface {},编辑并将其编组成一个字节似乎更复杂,那么它应该是
  • Gson是默认的无参数构造函数吗?
  • JavaScript可以连接MySQL吗?
  • 使用NSURLSession下载JSON不会返回任何数据
  • IE尝试下载JSON响应,同时提交包含文件的jQuery多部分表单数据
  • JSON命名约定