AngularJS — создание новой строки при использовании ng-repeat

Я использую простой 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

html angularjs html-table angularjs-directive angularjs-ng-repeat
person Oam Psy    schedule 24.04.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете использовать 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

person Julien    schedule 24.04.2014
comment
Спасибо, у вас есть рабочая скрипка, так как это не работает - person Oam Psy; 24.04.2014
comment
Спасибо, я использую Angular v1.1.5, будет ли ng-repeat-start/end работать с этой версией? - person Oam Psy; 24.04.2014
comment
Поскольку это не упоминается в документации версии 1.1.5 (code.angularjs.org/1.1.5/docs/api/ng.directive:ngRepeat), думаю, это не сработает. Кстати, я рекомендую вам перейти на версию 1.2, так как версии 1.1 были экспериментальными (см. docs.angularjs .org/guide/migration) - person Julien; 24.04.2014
comment
я бы мигрировал, однако маршрут чтения и ресурс теперь являются отдельными библиотеками, я бы предпочел использовать 1.1.5, чтобы иметь только 1 HTTP-запрос - person Oam Psy; 24.04.2014

arrow_upward
1
arrow_downward

Вы повторяете 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>

ДЕМО

person defau1t    schedule 24.04.2014
comment
@default - Спасибо, у вас есть работающая скрипка, так как она не работает? - person Oam Psy; 24.04.2014
comment
Спасибо, я использую Angular v1.1.5, будет ли ng-repeat-start/end работать с этой версией? - person Oam Psy; 24.04.2014