Json 嵌套ng重复
我有一些虚拟XML文件:Json 嵌套ng重复,json,angularjs,Json,Angularjs,我有一些虚拟XML文件: <Week number="2013-W45"> <Day dow="1" templateDay="Monday"> <Job name="wake up" > <Job name="get dressed" > <Job name="prepare breakfast" > <Job
<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>
一天可以有任意数量的作业,作业可以嵌套并包含任意数量的其他作业
现在使用这个代码
<p ng-repeat="day in myData.Week.Day">
{{day._dow}} - {{day._templateDay}}
</p>
{{day.{dow}}-{day.{templateDay}}
我可以列出有效的日期。我希望通过下面的代码
<p ng-repeat="day in myData.Week.Day">
{{day._dow}} - {{day._templateDay}}
<span ng-repeat="job in day.Job">
{{job._name}}
<span/>
</p>
{{day.{dow}}-{day.{templateDay}}
{{job.{u name}}
我可以列出当天的天数和顶级工作,但这不起作用。(下一个任务是列出嵌套作业,而不是现在询问)
那么,如何至少列出顶级工作?同样在json格式中,我看到一些作业是对象
,一些是数组
。如何处理这两种情况
注:使用angular 1.2.0-rc.3最好使用正确的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>
{{day.dow}}-{day.templateDay}
工作:
-
{{job.name}
如果您有一个大的嵌套JSON对象,并在多个屏幕上使用它,那么在页面加载时可能会遇到性能问题。我总是选择单独的小JSON对象,只在需要的地方查询相关对象作为延迟加载
您可以使用nginit实现它
<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>
而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' }
});
});
创建一个虚拟标记,该标记不会呈现在页面上,但将用作ng repeat的保持器:
<dummyTag ng-repeat="featureItem in item.features">{{featureItem.feature}}</br> </dummyTag>
{{featureItem.feature}}
好的,假设我可以转换为您发布的json,我现在如何循环处理天和他们的(顶级)工作?抱歉,但是我仍然无法从嵌套的ng repeat
中输出任何内容。示例:用div标记替换p标记有效 标记似乎不能包含块元素。更新的fiddle at:难以置信,我在angular/js代码中寻找错误,没有想到会出现这种愚蠢的错误。非常感谢@Prasad我看到了你的答案我面临着几乎相同的问题请帮助。
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' }
});
});
<dummyTag ng-repeat="featureItem in item.features">{{featureItem.feature}}</br> </dummyTag>