嵌套NG重复 [英] Nested ng-repeat
问题描述
我有一些虚拟的XML文件：
I have some dummy XML file:
<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：//$c$c.google.com/p/x2js/ 我把它转换成JSON，到变量 myData的
Using this library http://code.google.com/p/x2js/ I convert it to json, into variable myData
{
"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"
}
}
天可以有任意数量的乔布斯，乔布斯可以嵌套和包含任意数量的其他工作。
Day can have any number of Jobs, Jobs can be nested and contain any number of other Jobs.
现在使用这种code
Now using this code
<p ng-repeat="day in myData.Week.Day">
{{day._dow}} - {{day._templateDay}}
</p>
我可以列出，那工作的日子。我期望与下面code
I can list the days, that works. I would expect that with following code
<p ng-repeat="day in myData.Week.Day">
{{day._dow}} - {{day._templateDay}}
<span ng-repeat="job in day.Job">
{{job._name}}
<span/>
</p>
我可以列出天，顶级乔布斯的那一天，但它不工作。 （要列出嵌套乔布斯会是下一个任务，不问现在）。
I can list days and top level Jobs for that day, but it doesn't work. (To list the nested Jobs would be next task, not asking about that now).
那么，如何列出至少顶级乔布斯？另外在JSON格式，我看到一些乔布斯对象有的阵列。如何处理这两种情况？
So, how to list at least the top-level Jobs? Also in the json format, I see some Jobs are Objects and some are Arrays. How to handle both situations?
PS：采用了棱角分明1.2.0-rc.3
PS.: using angular 1.2.0-rc.3
推荐答案
最好是有一个正确的JSON格式，而不是直接使用一个来自XML转换的。
It's better to have a proper JSON format instead of directly using the one converted from 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",
}
]
}
]
}
]
}
]
这将通过使事情变得更加简单，易于循环。
This will make things much easier and easy to loop through.
现在可以编写环路 -
Now you can write the loop as -
<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>
这篇关于嵌套NG重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
