For loop AngularJS：如何在分层数据收集上使用ng repeat

我正在从服务器接收分层的集合。也就是说，我有一份包含系列研究的研究清单。例如，我从服务器获取下面的对象

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>

{{studyDescription}
//如何为每个系列重复？？？？

如何使用AngularJS ng repeat指令显示此类分层数据？我以前试过用，但没用。基本上，我需要多个for循环来多次重复行。如何做到这一点

---

谢谢。

你试过重复吗？试试这个：

  <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>

{{study.studyDescription}
{{serie.seriesDescription}

您尝试过嵌套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>

{{study.studyDescription}
{{serie.seriesDescription}

您可以使用多个

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>

研究
系列
{{study.studyDescription}
{{series.seriesDescription}

以下是JSFIDLE：

---

告诉我它是否适用于您，但我不确定它是否适用于所有浏览器。

您可以使用多个

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>

研究
系列
{{study.studyDescription}
{{series.seriesDescription}

以下是JSFIDLE：

---

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

您可以在top repeat ng repeat=“data in study.series”中包含另一个repeat，然后使用值{{data.seriessdescription}我尝试在tr顶部添加一个div，并使用了ng repeat。但这并不奏效。所以我试着这样做，你可以在top repeat ng repeat=“data in study.series”中包含另一个repeat，然后使用值{{data.seriessdescription}，我试着在tr的顶部添加一个div，并使用了ng repeat。但这并不奏效。所以我试着这样嗨，波伦，这不起作用。这个过程本身应该重复，对吗？无论如何，在你的提议中，这是不会发生的。嗨，普兰，这不起作用。这个过程本身应该重复，对吗？在你的建议中，无论如何，这不会发生。这很有效，谢谢。我尝试了Chrome和IE9（这是我的目标）。那么现在就开始吧。我看到浏览器之间的一个区别是（研究的）排序顺序不同，但我可以通过应用过滤器来管理。这种方法只支持二维数组（因为

tbody

和

tr

不能嵌套在彼此内部）。你能给多维herarchies提些建议吗？这很有效，谢谢。我尝试了Chrome和IE9（这是我的目标）。那么现在就开始吧。我看到浏览器之间的一个区别是（研究的）排序顺序不同，但我可以通过应用过滤器来管理。这种方法只支持二维数组（因为

tbody

和

tr

不能嵌套在彼此内部）。你能给多维herarchies提些建议吗？