Angular.js ng-repeat для нескольких элементов

Question 1

Этот вопрос был частично рассмотрен здесь: Angular.js ng-repeat через несколько tr

Однако на самом деле это всего лишь обходной путь, на самом деле он не решает основную проблему, а именно: как можно использовать ng-repeat для нескольких элементов без оболочки?

Например, jquery.accordion требует, чтобы вы повторили элемент h3 и div, как можно сделать это с помощью ng-repeat?

Question 2

Теперь у нас есть для этого надлежащая поддержка, см.

AngularJs Commmit

с этим изменением теперь вы можете:

<table>
  <tr ng-repeat-start="item in list">
      <td>I get repeated</td>
  </tr>
  <tr ng-repeat-end>
      <td>I also get repeated</td>
  </tr>
</table>

Question 3

Чтобы ответить на вопрос Андре выше о более чем двух уровнях ng-repeat в таблице, вы можете использовать несколько ng-repeat-start для этого.

<tr ng-repeat-start="items in list">
   <td>{{items.title}}</td>
</tr>
<tr ng-repeat-start="item in items">
   <td>{{item.subtitle}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in item.values">
   <td>{{value.col1}}</td>
   <td>{{value.col2}}</td>
</tr>
<tr ng-repeat-end></tr>

Вот пример плункера

Question 4

ОБНОВЛЕНИЕ : этот ответ устарел. См. Ответ @IgorMinar и используйте стандарты ng-repeat-startи ng-repeat-endдирективы.

~~Есть два варианта:~~

Первый вариант - создать директиву, которая будет отображать несколько тегов и заменять исходный тег ( jsfiddle )

<div multi ></div>

angular.module('components').directive('multi', function ($compile) {
return {
    restrict: 'A',
    scope : {
       first : '=',
       last : '=',
    },        
    terminal:true,

    link: function (scope, element, attrs) {
       var tmpl = '', arr = [0,1,2,3]

       // this is instead of your repeater
       for (var i in arr) {
          tmpl +='<div>another div</div>'
       }

       var newElement = angular.element(tmpl);
       $compile(newElement)(scope);
       element.replaceWith(newElement); 
    }
})

Второй вариант - использовать обновленный исходный код angular, который включает директиву ngRepeat в стиле комментариев ( plnkr ).

<body ng-controller="MainCtrl">
 <div ng-init="arr=[0,1,2]" ></div>
   <!-- directive: ng-repeat i in arr -->
     <div>{{i}}</div>
     <div>{{ 'foo' }}</div>  
   <!-- /ng-repeat -->

   {{ arr }}

  <div ng-click="arr.push(arr.length)">add</div>
</body>

Answer 1

Этот вопрос был частично рассмотрен здесь: Angular.js ng-repeat через несколько tr

Однако на самом деле это всего лишь обходной путь, на самом деле он не решает основную проблему, а именно: как можно использовать ng-repeat для нескольких элементов без оболочки?

Например, jquery.accordion требует, чтобы вы повторили элемент h3 и div, как можно сделать это с помощью ng-repeat?

Answer 2

159

Теперь у нас есть для этого надлежащая поддержка, см.

AngularJs Commmit

с этим изменением теперь вы можете:

<table>
  <tr ng-repeat-start="item in list">
      <td>I get repeated</td>
  </tr>
  <tr ng-repeat-end>
      <td>I also get repeated</td>
  </tr>
</table>

Игорь Минар
источник

1

В случае, если это поможет кому-то другому ... Этого не было ни в стабильной, ни в нестабильной сборке AngularJs на веб-сайте angularjs.org. Чтобы это заработало, мне пришлось установить новейший Angular.js - инструкции здесь: stackoverflow.com/questions/17501052/…

geoidesic 06

3

Как предполагает @geoidesic, это появилось после 1.1.5, так что следите за ним в 1.1.6 (или, скорее всего, в 1.2.0)

Ансон

1

просто нужно добавить, что ng-repeat-start принадлежит к нестабильной версии в настоящее время (13 августа)

bresleveloper

1

А что, если второй <tr> сам по себе "вложенный" повтор? например: <tr ng-repeat-start = ".."> </tr> <tr ng-repeat = "somethingelse" nt-repeat-stop> </tr>

Андре

@Andre Не делай этого. Лучше создайте новую директиву в своем первом ng-repeat.

geoidesic

Answer 3

1

В случае, если это поможет кому-то другому ... Этого не было ни в стабильной, ни в нестабильной сборке AngularJs на веб-сайте angularjs.org. Чтобы это заработало, мне пришлось установить новейший Angular.js - инструкции здесь: stackoverflow.com/questions/17501052/…

geoidesic 06

Answer 4

3

Как предполагает @geoidesic, это появилось после 1.1.5, так что следите за ним в 1.1.6 (или, скорее всего, в 1.2.0)

Ансон

Answer 5

1

просто нужно добавить, что ng-repeat-start принадлежит к нестабильной версии в настоящее время (13 августа)

bresleveloper

Answer 6

1

А что, если второй <tr> сам по себе "вложенный" повтор? например: <tr ng-repeat-start = ".."> </tr> <tr ng-repeat = "somethingelse" nt-repeat-stop> </tr>

Андре

Answer 7

@Andre Не делай этого. Лучше создайте новую директиву в своем первом ng-repeat.

geoidesic

Answer 8

Чтобы ответить на вопрос Андре выше о более чем двух уровнях ng-repeat в таблице, вы можете использовать несколько ng-repeat-start для этого.

<tr ng-repeat-start="items in list">
   <td>{{items.title}}</td>
</tr>
<tr ng-repeat-start="item in items">
   <td>{{item.subtitle}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in item.values">
   <td>{{value.col1}}</td>
   <td>{{value.col2}}</td>
</tr>
<tr ng-repeat-end></tr>

Вот пример плункера

Answer 9

Пытаюсь выполнить эту работу, но получаю только следующее: атрибут Unterminated, обнаружен «ng-repeat-start», но не найдено соответствие «ng-repeat-end». Это больше не работает? Использование angular 1.5

stibay 07

Answer 10

3

ОБНОВЛЕНИЕ : этот ответ устарел. См. Ответ @IgorMinar и используйте стандарты ng-repeat-startи ng-repeat-endдирективы.

~~Есть два варианта:~~

Первый вариант - создать директиву, которая будет отображать несколько тегов и заменять исходный тег ( jsfiddle )

<div multi ></div>

angular.module('components').directive('multi', function ($compile) {
return {
    restrict: 'A',
    scope : {
       first : '=',
       last : '=',
    },        
    terminal:true,

    link: function (scope, element, attrs) {
       var tmpl = '', arr = [0,1,2,3]

       // this is instead of your repeater
       for (var i in arr) {
          tmpl +='<div>another div</div>'
       }

       var newElement = angular.element(tmpl);
       $compile(newElement)(scope);
       element.replaceWith(newElement); 
    }
})

Второй вариант - использовать обновленный исходный код angular, который включает директиву ngRepeat в стиле комментариев ( plnkr ).

<body ng-controller="MainCtrl">
 <div ng-init="arr=[0,1,2]" ></div>
   <!-- directive: ng-repeat i in arr -->
     <div>{{i}}</div>
     <div>{{ 'foo' }}</div>  
   <!-- /ng-repeat -->

   {{ arr }}

  <div ng-click="arr.push(arr.length)">add</div>
</body>

Vittore
источник

Звучит здорово. Но я ничего не понимаю! В вашем первом примере я не вижу ng-repeat, поэтому я не уверен, насколько это актуально (я посмотрел на скрипку, но она настолько сложна, что я не могу понять ее). Ваш второй пример для меня просто пустяк.

geoidesic 03

Первый пример не решает проблему, потому что вы по-прежнему получаете повторяющуюся обертку вокруг двух элементов ... т.е. элемент, содержащий директиву ng-repeat, тоже повторяется - я просто хочу, чтобы внутренние элементы повторялись.

geoidesic 03

@ user2448430 нет, не знаешь. element.replaceWith(newElement);заменит тег оболочки на то, что вам нужно. также вы можете включить цикл в своей директиве и добавить столько тегов, сколько вам нужно, в tmpl.

vittore

Я не согласен. Пробовал и он повторяет элемент, содержащий директиву ng-repeat. Также второй пример на самом деле не работает. Div не повторяется, это просто массив, который выводится в вашем примере с plnkr.

geoidesic 03

1

@JoshGough это так, поэтому я добавляю правило в свой CSS, чтобы скрыть эти промежутки.

vittore

Answer 11

Звучит здорово. Но я ничего не понимаю! В вашем первом примере я не вижу ng-repeat, поэтому я не уверен, насколько это актуально (я посмотрел на скрипку, но она настолько сложна, что я не могу понять ее). Ваш второй пример для меня просто пустяк.

geoidesic 03

Answer 12

Первый пример не решает проблему, потому что вы по-прежнему получаете повторяющуюся обертку вокруг двух элементов ... т.е. элемент, содержащий директиву ng-repeat, тоже повторяется - я просто хочу, чтобы внутренние элементы повторялись.

geoidesic 03

Answer 13

@ user2448430 нет, не знаешь. element.replaceWith(newElement);заменит тег оболочки на то, что вам нужно. также вы можете включить цикл в своей директиве и добавить столько тегов, сколько вам нужно, в tmpl.

vittore

Answer 14

Я не согласен. Пробовал и он повторяет элемент, содержащий директиву ng-repeat. Также второй пример на самом деле не работает. Div не повторяется, это просто массив, который выводится в вашем примере с plnkr.

geoidesic 03

Answer 15

1

@JoshGough это так, поэтому я добавляю правило в свой CSS, чтобы скрыть эти промежутки.

vittore

Angular.js ng-repeat для нескольких элементов

Ответы:

AngularJs Commmit