Как использовать ng-repeat без HTML-элемента

142

Мне нужно использовать ng-repeat(в AngularJS), чтобы перечислить все элементы в массиве.

Сложность состоит в том, что каждый элемент массива преобразуется в одну, две или три строки таблицы.

Я не могу создать действительный HTML, если ng-repeatиспользуется для элемента, так как между <tbody>и <tr>.

Например, если бы я использовал ng-repeat <span>, я бы получил:

<table>
  <tbody>
    <span>
      <tr>...</tr>
    </span>
    <span>
      <tr>...</tr>
      <tr>...</tr>
      <tr>...</tr>
    </span>
    <span>
      <tr>...</tr>
      <tr>...</tr>
    </span>
  </tbody>
</table>

Который является недействительным HTML.

Но то, что мне нужно создать:

<table>
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

где первая строка была сгенерирована первым элементом массива, следующие три - вторым, а пятый и шестой - последним элементом массива.

Как я могу использовать ng-repeat таким образом, чтобы элемент html, с которым он связан, «исчезал» во время рендеринга?

Или есть другое решение для этого?

Пояснение: сгенерированная структура должна выглядеть следующим образом. Каждый элемент массива может генерировать от 1 до 3 строк таблицы. В идеале ответ должен поддерживать 0-n строк на элемент массива.

<table>
  <tbody>
    <!-- array element 0 -->
    <tr>
      <td>One row item</td>
    </tr>
    <!-- array element 1 -->
    <tr>
      <td>Three row item</td>
    </tr>
    <tr>
      <td>Some product details</td>
    </tr>
    <tr>
      <td>Customer ratings</td>
    </tr>
    <!-- array element 2 -->
    <tr>
      <td>Two row item</td>
    </tr>
    <tr>
      <td>Full description</td>
    </tr>
  </tbody>
</table>

angularjs

— fadedbee
источник

Может быть, вы должны использовать «заменить: правда»? Смотрите это: stackoverflow.com/questions/11426114/...

Кроме того, почему вы не можете использовать ng-repeat на самом tr?

2

@Tommy, потому что «каждый элемент массива преобразуется в одну, две или три строки таблицы». trНасколько я понимаю, если бы я использовал ng-repeat, я бы получил по одной строке на элемент массива.

— увядшая пчела

1

Да я вижу. Разве вы не можете просто расплющить модель, прежде чем использовать ее в репитере?

@ Томми, нет. 1-3 trс, которые генерируются одним элементом массива, не имеют одинаковую структуру.

— увядшая пчела

66

Обновление: если вы используете Angular 1.2+, используйте ng-repeat-start . Смотрите ответ @ jmagnusson.

Иначе, как насчет размещения ng-repeat на tbody? (AFAIK, можно иметь несколько <tbody> в одной таблице.)

<tbody ng-repeat="row in array">
  <tr ng-repeat="item in row">
     <td>{{item}}</td>
  </tr>
</tbody>

— Марк Райкок
источник

62

Хотя технически это может сработать, очень обидно, что ответом для этого распространенного варианта использования является то, что вам нужно добавить произвольную (иначе ненужную) разметку. У меня та же проблема (повторяющиеся группы строк - один заголовок TR с одним или несколькими дочерними TR, повторяющимися как группа). Тривиально с другими шаблонными движками, в лучшем случае с Angular.

— Брайан Мескау

1

Согласовано. Я пытаюсь повторить элементы DT + DD. это невозможно сделать без добавления недопустимого элемента обтекания

— Дэвид Лин

2

@DavidLin, в Angular v1.2 (когда бы он ни появлялся) вы сможете повторять несколько элементов, например, dt и dd: youtube.com/watch?v=W13qDdJDHp8&t=17m28s

— Марк Раджкок

Это элегантно обрабатывается в KnockoutJS с использованием синтаксиса потока управления без контейнера: knockoutjs.com/documentation/foreach-binding.html . Надеюсь, что Angular скоро сделает что-то подобное.

— Кори Дом

3

Этот ответ устарел, вместо этого используйте ng-repeat-start

— iwein

73

Начиная с AngularJS 1.2, существует директива, ng-repeat-startкоторая выполняет именно то, что вы просите. Смотрите мой ответ в этом вопросе для описания того, как его использовать.

— jmagnusson
источник

Angular догнал, теперь это правильное решение.

— iwein

33

Если вы используете ng> 1.2, вот пример использования ng-repeat-start/endбез генерации ненужных тегов:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
      angular.module('mApp', []);
    </script>
  </head>
  <body ng-app="mApp">
    <table border="1" width="100%">
      <tr ng-if="0" ng-repeat-start="elem in [{k: 'A', v: ['a1','a2']}, {k: 'B', v: ['b1']}, {k: 'C', v: ['c1','c2','c3']}]"></tr>

      <tr>
        <td rowspan="{{elem.v.length}}">{{elem.k}}</td>
        <td>{{elem.v[0]}}</td>
      </tr>
      <tr ng-repeat="v in elem.v" ng-if="!$first">
        <td>{{v}}</td>
      </tr>

      <tr ng-if="0" ng-repeat-end></tr>
    </table>
  </body>
</html>

Развернуть фрагмент

Важный момент: для тегов, которые используются ng-repeat-startи ng-repeat-endустановлены ng-if="0", чтобы не вставлять на страницу. Таким образом, внутреннее содержимое будет обрабатываться точно так же, как в knockoutjs (с использованием команд in ), и мусора не будет.

— Дука Арпад
источник

после установки ng-if = "0" выдает ошибку, говорящую о невозможности найти соответствующий ng-repeat-end.

— Викки MCTS

19

Возможно, вы захотите сгладить данные в вашем контроллере:

function MyCtrl ($scope) {
  $scope.myData = [[1,2,3], [4,5,6], [7,8,9]];
  $scope.flattened = function () {
    var flat = [];
    $scope.myData.forEach(function (item) {
      flat.concat(item);
    }
    return flat;
  }
}

А потом в HTML:

<table>
  <tbody>
    <tr ng-repeat="item in flattened()"><td>{{item}}</td></tr>
  </tbody>
</table>

— btford
источник

1

Нет, это не так. Вызов функции внутри выражения ngRepeat абсолютно не рекомендуется

— Ник

В моем случае, я должен добавить разделитель для каждого элемента , где индекс = 0 и! ng-repeat-start, ng-repeat-endСломать мой дизайн, поэтому решение должно было создать дополнительную переменную добавить этот объект разделитель перед каждым элементом и перебирать новый вар:

<div class="c477_group"> 	<div class="c477_group_item" ng-repeat="item in itemsWithSeparator" ng-switch="item.id" ng-class="{'-divider' : item.id == 'SEPARATOR'}"> 		<div class="c478" ng-switch-when="FAS"/> 		<div class="c478" ng-switch-when="SEPARATOR" /> 		<div class="c479" ng-switch-default /> 	</div> </div>

— hermeslm

6

Вышеприведенное верно, но для более общего ответа этого недостаточно. Мне нужно было вложить ng-repeat, но остаться на том же уровне html, то есть записать элементы в том же родительском элементе. Массив тегов содержит теги, которые также имеют массив тегов. Это на самом деле дерево.

[{ name:'name1', tags: [
  { name: 'name1_1', tags: []},
  { name: 'name1_2', tags: []}
  ]},
 { name:'name2', tags: [
  { name: 'name2_1', tags: []},
  { name: 'name2_2', tags: []}
  ]}
]

Итак, вот что я в итоге сделал.

<div ng-repeat-start="tag1 in tags" ng-if="false"></div>
    {{tag1}},
  <div ng-repeat-start="tag2 in tag1.tags" ng-if="false"></div>
    {{tag2}},
  <div ng-repeat-end ng-if="false"></div>
<div ng-repeat-end ng-if="false"></div>

Обратите внимание на ng-if = "false", который скрывает начальный и конечный div.

Это должно напечатать

name1, name1_1, name1_2, name2, NAME2_1, name2_2,

— Αλέκος
источник

1

Я хотел бы просто прокомментировать, но моей репутации все еще не хватает. Поэтому я добавляю другое решение, которое также решает проблему. Мне бы очень хотелось опровергнуть заявление @bmoeskau о том, что решение этой проблемы требует решения «в лучшем случае взломано», и, поскольку об этом недавно говорилось в дискуссии, хотя этому посту уже 2 года, я хотел бы добавить свой собственные два цента:

Как указал @btford, вы, похоже, пытаетесь превратить рекурсивную структуру в список, поэтому сначала вы должны сгладить эту структуру в списке. Его решение делает это, но есть мнение, что вызов функции внутри шаблона не элегантен. если это правда (если честно, я не знаю), не потребует ли это выполнения функции в контроллере, а не директивы?

в любом случае, ваш html требует список, поэтому область его отображения должна иметь этот список для работы. Вы просто должны сплющить структуру внутри вашего контроллера. как только у вас есть массив $ scope.rows, вы можете сгенерировать таблицу с помощью одного простого ng-repeat. Без взлома, без излишеств, просто так, как это было задумано.

Директивы Angulars не лишены функциональности. Они просто заставляют вас писать действительный HTML. У моего коллеги была похожая проблема, со ссылкой на @bmoeskau в поддержку критики в отношении шаблонов / рендеринга ангуляров. Глядя на точную проблему, выяснилось, что он просто хотел сгенерировать открытый тег, затем закрывающий тег где-нибудь еще и т. Д., Как в старые добрые времена, когда мы объединяли наш html из строк ... верно? нет.

Что касается сглаживания структуры в список, вот еще одно решение:

// assume the following structure
var structure = [
    {
        name: 'item1', subitems: [
            {
                name: 'item2', subitems: [
                ],
            }
        ],
    }
];
var flattened = structure.reduce((function(prop,resultprop){
    var f = function(p,c,i,a){
        p.push(c[resultprop]);
        if (c[prop] && c[prop].length > 0 )
          p = c[prop].reduce(f,p);
        return p;
    }
    return f;
})('subitems','name'),[]);

// flattened now is a list: ['item1', 'item2']

это будет работать для любой древовидной структуры, имеющей подпункты. Если вам нужен весь элемент вместо свойства, вы можете сократить функцию выравнивания еще больше.

надеюсь, это поможет.

— Ар Эс
источник

Хороший. Хотя это не помогло мне напрямую, оно открыло мне разум для другого решения. Большое спасибо!

— Мариан Збурлеа

0

для решения, которое действительно работает

HTML

<remove  ng-repeat-start="itemGroup in Groups" ></remove>
   html stuff in here including inner repeating loops if you want
<remove  ng-repeat-end></remove>

добавить директиву angular.js

//remove directive
(function(){
    var remove = function(){

        return {    
            restrict: "E",
            replace: true,
            link: function(scope, element, attrs, controller){
                element.replaceWith('<!--removed element-->');
            }
        };

    };
    var module = angular.module("app" );
    module.directive('remove', [remove]);
}());

для краткого объяснения,

ng-repeat связывается с <remove>элементом и выполняет циклы, как и должно быть, и поскольку мы использовали ng-repeat-start / ng-repeat-end, он циклически повторяет блок html, а не просто элемент.

Затем пользовательская директива удаления помещает <remove>начальный и конечный элементы

— Clint
источник

-2

<table>
  <tbody>
    <tr><td>{{data[0].foo}}</td></tr>
    <tr ng-repeat="d in data[1]"><td>{{d.bar}}</td></tr>
    <tr ng-repeat="d in data[2]"><td>{{d.lol}}</td></tr>
  </tbody>
</table>

Я думаю, что это действительно так :)

— Ренан Томаль Фернандес
источник

Хотя это работает, оно будет работать, только если массив состоит из трех элементов.

— Btford

Просто убедитесь, что массив имеет 3 элемента, даже если они являются пустыми массивами (ng-repeat с пустым массивом просто ничего не рендерит).

— Ренан Томаль Фернандес

7

Моя точка зрения заключалась в том, что OP, вероятно, хочет решение, которое работает для переменного числа элементов в массиве. Я предполагаю, что жесткое кодирование «должно быть три элемента в этом массиве» в шаблоне будет плохим решением.

— Btford

В последнем комментарии к своему вопросу он говорит, что элементы не будут иметь одинаковую структуру, поэтому жесткое кодирование каждой структуры неизбежно.

— Ренан Томаль Фернандес