Nested ng-repeat

Question

I have some dummy XML file    lt Week number  2013-W45  gt       lt Day dow  1  templateDay  Monday  gt           lt Job name  wake up   gt               lt Job name  get dressed   gt                   lt Job name  prepare breakfast   gt                       lt Job name  eat breakfast   gt   lt  Job gt                   lt  Job gt               lt  Job gt           lt  Job gt           lt Job name  work 9-5   gt           lt  Job gt       lt  Day gt       lt Day dow  2  templateDay  Tuesday     gt           lt Job name  wake up   gt               lt Job name  get dressed   gt                   lt Job name  prepare breakfast   gt                       lt Job name  eat breakfast   gt   lt  Job gt                   lt  Job gt               lt  Job gt           lt  Job gt           lt Job name  work 9-5   gt           lt  Job gt           lt Job name  football   gt           lt  Job gt       lt  Day gt       lt Day dow  3    templateDay  Wednesday   gt           lt Job name  wake up   gt               lt Job name  get dressed   gt                   lt Job name  prepare breakfast   gt                       lt Job name  eat breakfast   gt   lt  Job gt                   lt  Job gt               lt  Job gt           lt  Job gt           lt Job name  work 9-5   gt           lt  Job gt       lt  Day gt       lt Day dow  4   templateDay  Thursday    gt           lt Job name  wake up   gt               lt Job name  get dressed   gt                   lt Job name  prepare breakfast   gt                       lt Job name  eat breakfast   gt   lt  Job gt                   lt  Job gt               lt  Job gt           lt  Job gt           lt Job name  work 9-5   gt           lt  Job gt           lt Job name  football   gt           lt  Job gt       lt  Day gt       lt Day dow  5  templateDay  Friday   gt           lt Job name  go to pub   gt           lt  Job gt       lt  Day gt       lt Day dow  6  templateDay  Saturday    gt           lt Job name  work 9-5   gt           lt  Job gt       lt  Day gt       lt Day dow  7  templateDay  Sunday   gt           lt  -- nothing to do on sunday -- gt       lt  Day gt   lt  Week gt    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   lt p ng-repeat  day in myData Week Day  gt       day  dow   -   day  templateDay    lt  p gt    I can list the days  that works  I would expect that with following code   lt p ng-repeat  day in myData Week Day  gt        day  dow   -   day  templateDay         lt span ng-repeat  job in day Job  gt            job  name        lt span  gt   lt  p gt    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

User · Answer

Create a dummy tag that is not going to rendered on the page but it will work as holder for ng-repeat    lt dummyTag ng-repeat  featureItem in item features  gt   featureItem feature   lt  br gt   lt  dummyTag gt

User · 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 -    lt div ng-repeat  week in myData  gt      lt div ng-repeat  day in week days  gt          day dow   -   day templateDay          lt b gt Jobs  lt  b gt  lt br  gt           lt ul gt            lt li ng-repeat  job in day jobs  gt                job name              lt  li gt          lt  ul gt      lt  div gt   lt  div gt

User · Answer

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   you can achieve it using ng-init   lt td class  lectureClass  ng-repeat  s in sessions  ng-init  presenters getPresenters s id   gt          s name          lt div class  presenterClass  ng-repeat  p in presenters  gt              p name          lt  div gt   lt  td gt     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   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

[json] Nested ng-repeat

Examples related to json

Examples related to angularjs