AngularJS ng-repeat без элемента html

В настоящее время я использую этот fragment кода для отображения списка:

 

Однако элемент

вызывает некоторые незначительные дефекты рендеринга в некоторых браузерах. Я хотел бы знать, есть ли способ сделать ng-repeat без контейнера div или какой-либо альтернативный метод для достижения такого же эффекта.

Как сказал Энди Хослин, они работали над ng-повторами на основе комментариев, но, видимо, было слишком много проблем с браузером . К счастью, AngularJS 1.2 добавляет встроенную поддержку для повторения без добавления дочерних элементов с новыми директивами ng-repeat-start и ng-repeat-end .

Вот небольшой пример для добавления разбиения на страницы Bootstrap :

  

Полный рабочий пример можно найти здесь .

У Джона Линдквиста также есть видеоурок об этом на его превосходной странице egghead.io .

Синтаксис привязки без надписей KnockoutJS

Пожалуйста, несите меня второй: KnockoutJS предлагает ультра-удобный вариант использования синтаксиса привязки без контейнера для привязки foreach как описано в Примечании 4 документации привязки foreach . http://knockoutjs.com/documentation/foreach-binding.html

Как иллюстрирует пример документации Knockout, вы можете написать свою привязку в KnockoutJS следующим образом:

 
  • Header item
  • Item

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


Угловой ng-repeat-start и ng-repeat-end

В методе AngularJS для решения проблем ng-repeat образцы, с которыми я сталкиваюсь, относятся к типу jmagnusson, опубликованному в его (полезном) ответе.

 
  • {{page}}
  • Моя оригинальная мысль, увидев этот синтаксис: действительно? Почему Angular заставляет все эти дополнительные разметки, с которыми я не хочу иметь ничего общего, и это намного проще в Knockout? Но затем комментарий hitautodestruct в ответе jmagnusson начал заставлять меня задуматься: что генерируется с помощью ng-repeat-start и ng-repeat-end в отдельных тегах?


    Более чистый способ использования ng-repeat-start и ng-repeat-end

    При исследовании утверждения hitautodestruct добавление ng-repeat-end к отдельному тегу – это именно то, чего я бы не хотел делать в большинстве случаев, потому что он генерирует совершенно бесполезные элементы: в этом случае

  • элементы, в которых нет ничего. Разбитый список Bootstrap 3 стилирует элементы списка, так что похоже, что вы не генерировали лишних элементов, но когда вы проверяете сгенерированный html, они есть.

    К счастью , вам не нужно много делать, чтобы иметь более чистое решение и меньшее количество html: просто поместите объявление ng-repeat-end на тот же тег html, который имеет ng-repeat-start .

      

    Это дает три преимущества:

    1. меньше html-тегов для записи
    2. бесполезные, пустые tags не генерируются Angular
    3. когда массив для повторения пуст, тег с ng-repeat не будет генерироваться, что даст вам то же преимущество. Неконтейнерное связывание Knockout дает вам в этом отношении

    Но есть еще более чистый способ

    После дальнейшего рассмотрения комментариев в github по этому вопросу для Angular, https://github.com/angular/angular.js/issues/1891 ,
    вам не нужно использовать ng-repeat-start и ng-repeat-end для достижения тех же преимуществ. Вместо этого, повторив пример jmagnusson, мы можем просто пойти:

      

    Итак, когда использовать ng-repeat-start и ng-repeat-end ? Согласно угловой документации ,

    … повторить серию элементов вместо одного родительского элемента …

    Достаточно поговорить, показать несколько примеров!

    Справедливо; этот jsbin просматривает пять примеров того, что происходит, когда вы это делаете, и когда вы не используете ng-repeat-end на одном и том же теге.

    http://jsbin.com/eXaPibI/1/

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

      
  • Такая простая директива действительно не требует значения атрибута, но может дать вам много возможностей, например условное добавление делителя в соответствии с индексом, длиной и т. Д. Или что-то совершенно другое.

    У меня недавно была та же проблема, что мне пришлось повторять произвольный набор пролетов и изображений – наличие элемента вокруг них не было возможным – есть простое решение, но создайте «нулевую» директиву:

     app.directive("diNull", function() { return { restrict: "E", replace: true, template: "" }; }); 

    Затем вы можете использовать повтор на этом элементе, где element.url указывает на шаблон для этого элемента:

      

    Это повторит любое количество разных шаблонов без контейнера вокруг них

    Примечание: хм, я мог бы поклясться, что он удалил элемент di-null при рендеринге, но, проверяя его снова, он не … все еще решил мои проблемы с макетом, хотя … куриозер и куриозер …

    Существует ограничение на ограничение комментариев, но ngRepeat не поддерживает его (так как ему нужен элемент для повтора).

    Я думаю, я видел, как угловая команда говорит, что они будут работать над комментариями ng-repeat, но я не уверен. Вы должны открыть для него проблему на репо. http://github.com/angular/angular.js

    Существует не Угловой магический способ сделать это, потому что для вашего случая вы можете сделать это, чтобы получить действительный HTML, если вы используете Bootstrap. Тогда вы получите тот же эффект, что и добавление li.divider

    Создайте class:

     span.divider { display: block; } 

    Теперь измените свой код на это: