使用ng-repeat表的嵌套数据

时间:2014-08-07 13:41:27

标签: javascript angularjs angularjs-directive ng-repeat

我需要一些帮助,使用angularjs创建一个表来构建我的表。这里的问题是我的数据有多个嵌套级别,我的问题是我无法显示最内层。在此示例中,未显示任务记录。这是我的代码的修改版本,在我的指令中定义为templateUrl。

HTML:

<table class="table table-striped table-bordered table-hover">
<tr>
    <th>Identifier</th>
    <th ng-click="changeSorting('title')" ng-show="blnShowTitle">Title</th>
</tr>
<tr ng-repeat-start="incident in incidents | orderBy:sort.column:sort.descending | filter:tablefilter ">
    <td>{{incident.identifier}}</td>
    <td ng-show="blnShowTitle">{{incident.title}}</td>
</tr>
<tr ng-repeat="ap in incident.action_plans | orderBy:sort.column:sort.descending | filter:tablefilter 
" ng-show="incident.action_plans.length > 0">
    <td>{{ap.identifier}}</td>
    <td ng-show="blnShowTitle">{{ap.title}}</td>
</tr>
<tr ng-repeat-end ng-repeat="task in ap.tasks" ng-show="ap.tasks.length > 0">
    <td>{{task.task_number}}</td>
    <td ng-show="blnShowTitle">{{task.title}}</td>
</tr>
</table>

JSON(示例数据):

[
 {
    "event_id": "23",
    "event_number": "EVT-00000023",
    "title": "Test%20kc%20ml",
    "action_plans":
    [
      {
        "event_id": "23",
        "action_plan_id": "46",
        "action_plan_number": "AP-00000046",
        "title": "What we do next is this.",
        "tasks":
        [
          {
            "action_plan_id": "46",
            "task_id": "18",
            "task_number": "APT-00000018",
            "title": "ml task name"
          }
        ]
      }
    ],
    "selected": "false"
  }
]

2 个答案:

答案 0 :(得分:1)

因为你试图做一个没有嵌套的嵌套ng-repeat,你基本上有(简化):

<tr ng-repeat="ap in incident.action_plans"></tr>
<tr ng-repeat-end ng-repeat="task in ap.tasks"></tr>

您必须将ng-repeatap.tasks移动到ap的范围内 - 现在它不是。

答案 1 :(得分:1)

我认为这可能是你想要做的。您需要嵌套ng-repeat-start,如下所示。

<tr ng-repeat-start="thing in app.things">
    <td>{{thing.label}}</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr ng-repeat-start="action in thing.actions">
    <td>{{thing.label}}</td>
    <td>{{action.label}}</td>
    <td>&nbsp</td>
  </tr>
  <tr ng-repeat-end ng-repeat="task in action.tasks">
    <td>{{thing.label}}</td>
    <td>{{action.label}}</td>
    <td>{{task.label}}</td>
  </tr>
  <tr ng-repeat-end></tr></tr>

Plunker example