json 嵌套 ng-repeat
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19839743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nested ng-repeat
提问by przno
I have some dummy XML file:
我有一些虚拟的 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>
Using this library http://code.google.com/p/x2js/I convert it to json, into variable myData
使用这个库http://code.google.com/p/x2js/我把它转换成 json，变成变量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.
Day 可以有任意数量的 Jobs，Jobs 可以嵌套并包含任意数量的其他 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 Objectsand some are Arrays. How to handle both situations?
那么，如何至少列出顶级Jobs？同样在 json 格式中，我看到一些 JobsObjects是Arrays. 这两种情况如何处理？
PS.: using angular 1.2.0-rc.3
PS.: 使用 angular 1.2.0-rc.3
回答by Prasad
It's better to have a proper JSON format instead of directly using the one converted from XML.
最好有一个合适的 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",
}
]
}
]
}
]
}
]
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>
回答by Sacky San
If you have a big nested JSON object and using it across several screens, you might face performance issues in page loading. I always go for small individual JSON objects and query the related objects as lazy load only where they are required.
如果您有一个大型嵌套 JSON 对象并在多个屏幕上使用它，您可能会在页面加载时遇到性能问题。我总是选择小的单个 JSON 对象，并仅在需要时将相关对象作为延迟加载进行查询。
you can achieve it using ng-init
你可以使用 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>
The code on the controller side should look like below
控制器端的代码应如下所示
$scope.getPresenters = function(id) {
return SessionPresenters.get({id: id});
};
While the API factory is as follows:
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' }
});
});
回答by Homero
Create a dummy tag that is not going to rendered on the page but it will work as holder for ng-repeat:
创建一个不会在页面上呈现的虚拟标签，但它将作为 ng-repeat 的持有者：
<dummyTag ng-repeat="featureItem in item.features">{{featureItem.feature}}</br> </dummyTag>
