嵌套ng-repeat

70

我有一些虚拟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>

使用此库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可以有任意数量的Jobs，Jobs可以嵌套并且包含任意数量的其他Jobs。

现在使用此代码

<p ng-repeat="day in myData.Week.Day">
   {{day._dow}} - {{day._templateDay}}
</p>

我可以列出有效的日期。我希望使用以下代码

<p ng-repeat="day in myData.Week.Day">
    {{day._dow}} - {{day._templateDay}}

    <span ng-repeat="job in day.Job">
        {{job._name}}
    <span/>
</p>

我可以列出当天的工作日和最高级的工作，但这是行不通的。（要列出嵌套的Jobs，将是下一个任务，而不是现在询问该任务）。

那么，如何至少列出顶级职位？同样在json格式中，我看到一些JobsObjects和一些are Arrays。如何处理两种情况？

PS .:使用角度1.2.0-rc.3

json  angularjs 
— przno
source
— Satinder singh

Answers:

104

最好使用适当的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",

              }
            ]
          }
        ]
      }
    ]
  }
]

这将使事情变得越来越容易遍历。

现在，您可以将循环编写为- 

<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>
— 普拉萨德
source
1
好的，假设我可以转换为您发布的json，我现在将如何遍历工作日及其顶层工作？
— przno
抱歉，但是我仍然无法从nested输出任何内容ng-repeat。示例：jsfiddle.net/83XFS
— przno 2013年
11
用div标签替换p标签有效。<p>标签似乎不能包含块元素。更新小提琴：jsfiddle.net/83XFS/2
— Prasad
令人难以置信的是，我一直在寻找我的angular / js代码错误，却没有想到那种愚蠢的错误。非常感谢！
— przno
@Prasad我看到您的回答，我遇到的问题几乎相同，请帮助。链接
— Neotrixs '16
7

如果您有一个很大的嵌套JSON对象，并在多个屏幕上使用它，则可能会在页面加载中遇到性能问题。我总是去寻找小的单个JSON对象，并仅在需要它们时才将相关对象作为延迟加载查询。

您可以使用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>

控制器端的代码应如下所示

$scope.getPresenters = function(id) {
    return SessionPresenters.get({id: id});
};

而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' }
        });
    });
— 萨基·桑（Sacky San）
source
0

创建一个不会在页面上呈现的虚拟标签，但它将用作ng-repeat的持有人：

<dummyTag ng-repeat="featureItem in item.features">{{featureItem.feature}}</br> </dummyTag>
— 荷马
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.