AngularJS нг-повтор без HTML-элемента

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

<ul ng-cloak>
    <div ng-repeat="n in list">
        <li><a href="{{ n[1] }}">{{ n[0] }}</a></li>
        <li class="divider"></i>
    </div>
    <li>Additional item</li> 
</ul>

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

 nehz12 окт. 2012 г., 13:42
последний разделитель li кажется немного толще, чем его сложенный (chrome win7). Это может быть проблемой css, однако, я хотел бы знать, можно ли это исправить в угловых. Для сравнения, knockoutJS разрешает привязки без контейнеров, используя <! - ->.
 Ja͢ck12 окт. 2012 г., 15:25
Я вижу, я использую phptal на стороне сервера, и у них есть тег tal: block специально для этой цели :) думаю, DOM не всегда принимает новый тип тега, который сложнее с angular
 Nick27 мар. 2013 г., 11:37
Не могли бы вы также обновить HTML, чтобы отразить, как вы используетеhtmlAppend Директива?
 nehz28 мар. 2013 г., 06:42
Готово ... сделал это некоторое время назад, но я помню, как это работало
 Ja͢ck12 окт. 2012 г., 13:15
О каких проблемах рендеринга вы говорите?

Ответы на вопрос(6)

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

Кажется, я видел, как угловая команда сказала, что они будут работать над комментариями, но я не уверен. Вы должны открыть вопрос для этого в репо.http://github.com/angular/angular.js

 Zack S23 мар. 2016 г., 20:17
Комментарий от 2012 года. Это все еще так? Пытался искать в их документации, но не мог найти никаких ссылок.

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

 <li ng-repeat="item in coll" so-add-divide="your exp here"></li>

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

 nehz13 окт. 2012 г., 11:35
круто я добавил пользовательскую директиву и она работает. Это видео руководство помогло:youtube.com/watch?v=A6wq16Ow5Ec
KnockoutJS синтаксис привязки без контейнера

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

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

<ul>
    <li class="header">Header item</li>
    <!-- ko foreach: myItems -->
        <li>Item <span data-bind="text: $data"></span></li>
    <!-- /ko -->
</ul>

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

Радиально-хng-repeat-start а такжеng-repeat-end

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

<li ng-repeat-start="page in [1,2,3,4,5]"><a href="#">{{page}}</a></li>
<li ng-repeat-end></li>

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

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

После расследования утверждения Hitautodestruct, добавивng-repeat-end на отдельный тег это именно то, что я быне хочу сделать в большинстве случаев, потому что он генерирует совершенно бесполезные элементы: в этом случае,<li> предметы, в которых ничего нет Нумерованный список в Bootstrap 3 стилизует элементы списка так, чтобы выглядело так, как будто вы не сгенерировали лишних элементов, но когда вы проверяете сгенерированный html, они есть.

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

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>    
  <li ng-repeat-start="page in [1,2,3,4,5]" ng-repeat-end><a href="#"></a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

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

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

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

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Итак, когда использоватьng-repeat-start а такжеng-repeat-end? В соответствии сугловая документация, чтобы

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

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

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

http://jsbin.com/eXaPibI/1/
 mg107509 апр. 2014 г., 01:15
@Asad - «Суть вопроса» не четко сформулирована ОП. Кроме того, вы проверили вывод DOM принятого ответа? Я не могу себе представить, чтобы кто-то хотел такой вывод, по крайней мере, не для списка нумерации страниц начальной загрузки.
 Asad Saeeduddin09 апр. 2014 г., 01:19
@ mg1075 Да, вывод принятого ответа недопустим, поэтому я прокрутил все здесь. Суть вопроса очень ясна: найти способ применитьng-repeat или найти альтернативу использованию ОПng-repeat что устраняетdiv Артефакт в HTML. Ваш ответ не делает этого, так как нет возможности использовать его для двухli элементы в вопросе. Если я не прав, предоставьте пример разметки, которая адаптирует код OP для устраненияdiv элемент.
 mg107509 апр. 2014 г., 01:32
@Asad - Суть вопроса была бы более ясной, если бы ОП предоставил законченный пример результата, который он намеревался. Тот факт, что он принял «принятый» ответ, где в принятом ответе используется начальная нумерация страниц с существенно неправильной разметкой, только еще больше осложнил проблему. Пример 2 в jsbin, если это именно то, что на самом деле предназначено, решает проблему OP так, как это делает принятый ответ, но никто не должен использовать этот тип разметки для нумерации страниц при загрузке.jsbin.com/eXaPibI/1
 Asad Saeeduddin09 апр. 2014 г., 02:00
На самом деле, я только что снова посмотрел на первый ответ, и сгенерированная разметка точно соответствует сценарию использования OP, хотя и не удовлетворяет моим требованиям. ОП хочет разделительli генерируемый элемент, который является дополнительнымli вы видите в своем jsbin.
 Asad Saeeduddin09 апр. 2014 г., 00:20
Вы, кажется, неправильно поняли суть вопроса. Цель состоит в том, чтобы повторить два или более элементов списка одновременно, и ни ваш пример, ни страница, на которую вы ссылались, не обеспечивают способ сделать это. Как вы уже заметили, прикрепляяng-repeat-start а такжеng-repeat-end к тому же элементу совершенно бесполезно, когда вы можете использовать по умолчанию угловойng-repeat и покончим с этим.

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

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

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

<di-null ng-repeat="element in elements" ng-include="element.url" ></di-null>

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

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

 demalexx03 нояб. 2014 г., 15:48
replace устарела с версии 2.0.
 Lauri Lubi05 мая 2015 г., 10:21
Я пробовал выше, но template: "" приводит к тому, что ничего не меняется. Я использовал компоновщик изjsfiddle.net/markcoleman/fMP9s/1 и изменил его: link: function (scope, element, attrs) {element [0] .outerHTML = ''; $ Компиляции (element.contents ()) (масштаб); }

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

Создать класс:

span.divider {
 display: block;
}

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

<ul ng-cloak>
 <li div ng-repeat="n in list">
    <a href="{{ n[1] }}">{{ n[0] }}</a>
    <span class="divider"></span>
 </li>
 <li>Additional item</li>
</ul>
Решение Вопроса

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

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

<ul class="pagination">
  <li>
    <a href="#">&laquo;</a>
  </li>
  <li ng-repeat-start="page in [1,2,3,4,5,6]"><a href="#">{{page}}</a></li>
  <li ng-repeat-end class="divider"></li>
  <li>
    <a href="#">&raquo;</a>
  </li>
</ul>

Полный рабочий пример можно найтиВот.

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

 perilandmishap20 апр. 2015 г., 19:15
ng-repeat-start а такжеng-repeat-end немного сбивают с толку. Угловая документация помогает:https://docs.angularjs.org/api/ng/directive/ngRepeat#special-repeat-start-and-end-points
 Shadaez24 мая 2014 г., 20:22
Я серьезно сбит с толку, что это достигается просто <li ng-repeat = "страница в [1,2,3,4,5,6]»> <a href="#"> {{page}} </ a > </ li> -edit: неважно, думаю, я понял
 GFoley8323 июл. 2014 г., 08:05
Я понимаю, что вы просто пытаетесь продемонстрироватьng-repeat-start/end но это запутанный пример и неправильный вариант его использования. Стандартng-repeat следует использовать здесь, так как ваш код отображает дополнительный пустойli за каждый предмет. Вероятно, вы должны упомянуть об этом в своем посте.
 jmagnusson24 июл. 2014 г., 17:22
@ GFoley83 ты прав. Но он, кажется, хочет этот дополнительный элемент для каждой итерации, что невозможно безng-repeat-start, Я добавлюdivider Класс HTML на мой ответ, чтобы быть более понятным.
 hitautodestruct17 окт. 2013 г., 16:28
Разве это не требует печати элемента?

Ваш ответ на вопрос