AngularJS - 使用 ng-repeat 时创建一个新行

Question

我正在使用一个简单的 ng-repeat 来生成国家列表及其相应数据。每个列表中都有一个可以展开和折叠的隐藏行。

我正在努力让这个隐藏的行显示在ng-repeat 的每一行的底部。

HTML：

<tr ng-repeat="country in countries">
   <td>{{country.name}}</td>
   <td>{{country.population}}</td>
   <td>{{country.currency}}</td>
   <td>{{country.gpd}}</td>

   <tr>
        <p>Expand/collapse content</p>
   </tr>
</tr>

输出：

France     61.3     EUR    54
Germany    81.5     EUR    82
Spain      12.7     EUR    78
UK         51.3     GBR    64
Expand/collapse content

所需的输出：

France     61.3     EUR    54
Expand/collapse content

Germany    81.5     EUR    82
Expand/collapse content

Spain      12.7     EUR    78
Expand/collapse content

UK         51.3     GBR    64
Expand/collapse content

Answer 1

您可以使用ng-repeat-start 和ng-repeat-end 如下：

    <tr ng-repeat-start="country in countries">
       <td>{{country.name}}</td>
       <td>{{country.population}}</td>
       <td>{{country.currency}}</td>
       <td>{{country.gpd}}</td>
    </tr>
    <tr ng-repeat-end>
       <td>Expand/collapse content</td>
    </tr>   

工作小提琴：http://jsfiddle.net/nYzjY/372/

来源：https://docs.angularjs.org/api/ng/directive/ngRepeat

Answer 2

您正在重复 tr，然后在重复之后插入另一个 tr。因为您希望两个 tr's 都被重复。你应该把它们嵌套成一个。例如：

<div  ng-repeat="country in countries">
    <tr>
       <td>{{country.name}}</td>
       <td>{{country.population}}</td>
       <td>{{country.currency}}</td>
       <td>{{country.gpd}}</td>

       <tr>
            <p>Expand/collapse content</p>
       </tr>
    </tr>
    </div>

DEMO