Menu
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
543
You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
The ng-repeat directive repeats a set of HTML, a given number of times. The set of HTML will be repeated once per item in a collection. The collection must be an array or an object. Note: Each instance of the repetition is given its own scope, which consist of the current item.
Each ng-repeat creates a child scope with the passed data, and also adds an additional $index variable in that scope. So what you need to do is reach up to the parent scope, and use that $index . Save this answer.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
