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

您正在重复tr，然后在重复之后插入另一个tr。因为您希望重复tr's。你应该将它们嵌入到一个中。 E-G：

<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

Answer 2

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

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

2 个答案: