for-loop - AngularJS：如何在分层的数据集合上使用 ng-repeat

Question

我从分层的服务器接收到一个集合。即，我有一个包含系列的研究列表。例如，我从服务器获得以下对象。

var studies = [ {studyDescription: 'Study1', series:[ 
                                                {seriesDescription:'Series1'}, 
                                                {seriesDescription:'Series2'}
                                              ]
                }];

“系列”嵌套在研究中。

我正在使用 HTML 表格来显示这些数据。而且我想在显示时展平层次结构。即表格应如下所示：

 Study         Series
 --------------------
 Study1        Series1
 Study1        Series2  ---> Study1 repeats for each series it contains

我使用 ng-repeat 来迭代行：

 <tr ng-repeat="study in studies">
      <td>{{studyDescription}}</td>
      // HOW to repeat for each series ????
 </tr>

如何使用 AngularJS ng-repeat 指令显示这样的分层数据？我之前尝试过使用，但没有奏效。基本上我需要多个 for 循环来多次重复行。如何实现这一点。

谢谢。

Answer 1

您可以使用多个tbody迭代系列：

HTML：

<table border=1>
    <thead>
        <th>Studies</th>
        <th>Series</th>
    </thead>
    <tbody ng-repeat="study in studies">
        <tr ng-repeat="series in study.series">
            <td>{{study.studyDescription}}</td>
            <td>{{series.seriesDescription}}</td>
        </tr>
    </tbody>
</table>

这是 JSFiddle ：

http://jsfiddle.net/L3MWJ/1/

告诉我它是否适合你，我仍然不确定它是否适用于所有浏览器。

Answer 2

您是否尝试过嵌套的 ng-repeat ？尝试这个 ：

  <tr ng-repeat="study in studies">
      <td>{{study.studyDescription}}</td>
     <td> 
         <span ng-repeat="serie in study.series"></span>
               <p>  {{serie.seriesDescription}}</p>
     </td>
 </tr>