嵌套 ng-repeat [英] Nested ng-repeat
问题描述
我有一些虚拟的 XML 文件:
<Day dow="1" templateDay="Monday"><工作名称=醒来"><工作名称=穿好衣服"><工作名称=准备早餐"><工作名称=吃早餐"></作业></作业></作业></作业><工作名称="工作 9-5" ></作业></天><Day dow="2" templateDay="Tuesday" ><工作名称=醒来"><工作名称=穿好衣服"><工作名称=准备早餐"><工作名称=吃早餐"></作业></作业></作业></作业><工作名称="工作 9-5" ></作业><工作名称=足球"></作业></天><Day dow="3" templateDay="Wednesday" ><工作名称=醒来"><工作名称=穿好衣服"><工作名称=准备早餐"><工作名称=吃早餐"></作业></作业></作业></作业><工作名称="工作 9-5" ></作业></天><Day dow="4" templateDay="Thursday" ><工作名称=醒来"><工作名称=穿好衣服"><工作名称=准备早餐"><工作名称=吃早餐"></作业></作业></作业></作业><工作名称="工作 9-5" ></作业><工作名称=足球"></作业></天><Day dow="5" templateDay="Friday" ><工作名称=去酒吧"></作业></天><Day dow="6" templateDay="Saturday" ><工作名称="工作 9-5" ></作业></天><Day dow="7" templateDay="Sunday" ><!-- 周日无事可做--></天></周> 使用这个库 http://code.google.com/p/x2js/ 我将它转换为 json, 到变量 myData
<代码> {星期" : {日" : [{工作" : [{工作" : {工作" : {工作" : {"_name": "吃早餐"},"_name": "准备早餐"},"_name" : "穿好衣服"},_name":醒来"}, {"_name" : "工作 9-5"}],"_dow": "1","_templateDay": "星期一"}, {工作" : [{工作" : {工作" : {工作" : {"_name": "吃早餐"},"_name": "准备早餐"},"_name" : "穿好衣服"},_name":醒来"}, {"_name": "工作 9-5"}, {_name":足球"}],"_dow": "2","_templateDay": "星期二"}, {工作" : [{工作" : {工作" : {工作" : {"_name": "吃早餐"},"_name": "准备早餐"},"_name" : "穿好衣服"},_name":醒来"}, {"_name" : "工作 9-5"}],"_dow": "3","_templateDay": "星期三"}, {工作" : [{工作" : {工作" : {工作" : {"_name": "吃早餐"},"_name": "准备早餐"},"_name" : "穿好衣服"},_name":醒来"}, {"_name" : "工作 9-5"}, {_name":足球"}],"_dow": "4","_templateDay": "星期四"}, {工作" : {"_name": "去酒吧"},"_dow": "5","_templateDay": "星期五"}, {工作" : {"_name" : "工作 9-5"},"_dow": "6","_templateDay": "星期六"}, {"_dow": "7","_templateDay": "星期日"}],_number":2013-W45"}}Day 可以有任意数量的 Jobs，Jobs 可以嵌套并包含任意数量的其他 Jobs.
现在使用此代码
{{day._dow}} - {{day._templateDay}}</p>
我可以列出日期，这很管用.我希望使用以下代码
{{day._dow}} - {{day._templateDay}}<span ng-repeat="job in day.Job">{{job._name}}<span/></p>
我可以列出当天的天数和顶级职位，但它不起作用.(列出嵌套的工作将是下一个任务，现在不问这个).
那么，如何至少列出顶级职位?同样在 json 格式中，我看到一些作业是 Objects，一些是 Arrays.如何处理这两种情况?
PS.: 使用 angular 1.2.0-rc.3
最好有一个合适的 JSON 格式，而不是直接使用从 XML 转换而来的格式.
<预><代码>[{"number": "2013-W45",天": [{"道": "1","templateDay": "星期一",工作": [{"name": "唤醒",工作": [{"name": "准备早餐",}]},{"name": "工作 9-5",}]},{"道": "2","templateDay": "星期二",工作": [{"name": "唤醒",工作": [{"name": "准备早餐",}]}]}]}]这将使事情更容易和更容易循环.
现在你可以把循环写成 -
<div ng-repeat="day in week.days">{{day.dow}} - {{day.templateDay}}<b>工作:</b><br/><ul><li ng-repeat="job in day.jobs">{{job.name}}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>
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.
Now using this code
<p ng-repeat="day in myData.Week.Day">
{{day._dow}} - {{day._templateDay}}
</p>
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).
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.: using angular 1.2.0-rc.3
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-repeat的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
