AngularJS ng-repeat sem elemento html

Atualmente, estou usando este trecho de código para renderizar uma lista:

<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>

No entanto, o <div>elemento está causando alguns defeitos de renderização muito pequenos em alguns navegadores. Gostaria de saber se existe uma maneira de repetir o ng sem o contêiner div ou algum método alternativo para obter o mesmo efeito.

Como Andy Joslin disse, eles estavam trabalhando em repetições de ng com base em comentários, mas aparentemente havia muitos problemas com o navegador . Felizmente, o AngularJS 1.2 adiciona suporte integrado para repetição sem adicionar elementos filho com as novas diretivas ng-repeat-starte ng-repeat-end.

Aqui está um pequeno exemplo para adicionar paginação 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>

Um exemplo completo de trabalho pode ser encontrado aqui .

John Lindquist também tem um vídeo tutorial sobre isso em sua excelente página egghead.io .

Sintaxe de ligação sem contêiner KnockoutJS

Tenha um segundo: KnockoutJS oferece uma opção extremamente conveniente de usar uma sintaxe de vinculação sem contêiner para sua foreachvinculação, conforme discutido na Nota 4 da foreachdocumentação de vinculação. http://knockoutjs.com/documentation/foreach-binding.html

Conforme ilustra o exemplo de documentação do Knockout, você pode escrever sua vinculação em KnockoutJS assim:

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

Eu acho que é lamentável que o AngularJS não ofereça esse tipo de sintaxe.

Angular's ng-repeat-starteng-repeat-end

Na maneira do AngularJS de resolver ng-repeatproblemas, os exemplos que encontrei são do tipo que jmagnusson postou em sua resposta (útil).

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

Meu pensamento original ao ver essa sintaxe é: realmente? Por que o Angular está forçando toda essa marcação extra com a qual não quero fazer nada e que é muito mais fácil no Knockout? Mas então o comentário de hitautodestruct na resposta de jmagnusson começou a me fazer pensar: o que está sendo gerado com ng-repeat-start e ng-repeat-end em tags separadas?

Uma maneira mais limpa de usar ng-repeat-starteng-repeat-end

Ao investigar a afirmação de hitautodestruct, adicionar ng-repeat-enduma tag separada é exatamente o que eu não gostaria de fazer na maioria dos casos, porque gera elementos totalmente inúteis: neste caso, <li>itens sem nada neles. A lista paginada do Bootstrap 3 estiliza os itens da lista para que pareça que você não gerou nenhum item supérfluo, mas quando você inspeciona o html gerado, eles estão lá.

Felizmente , você não precisa fazer muito para ter uma solução mais limpa e uma quantidade menor de html: basta colocar a ng-repeat-enddeclaração na mesma tag html que contém ong-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>

Isso dá 3 vantagens:

1. menos tags html para escrever
2. inúteis, tags vazias não são geradas pelo Angular
3. quando a matriz a ser repetida está vazia, a tag com ng-repeatnão será gerada, dando a você a mesma vantagem que a vinculação sem recipiente do Knockout oferece a esse respeito

Mas ainda há uma maneira mais limpa

Depois de revisar os comentários no github sobre este problema para Angular, https://github.com/angular/angular.js/issues/1891 ,
você não precisa usar ng-repeat-starte ng-repeat-endobter as mesmas vantagens. Em vez disso, bifurcando novamente o exemplo de jmagnusson, podemos simplesmente ir:

<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>

Então, quando usar ng-repeat-starte ng-repeat-end? De acordo com a documentação angular , para

... repita uma série de elementos em vez de apenas um elemento pai ...

Chega de conversa, mostre alguns exemplos!

Justo; este jsbin percorre cinco exemplos do que acontece quando você faz e quando não usa ng-repeat-endna mesma tag.

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

ngRepeat pode não ser suficiente, no entanto, você pode combinar isso com uma diretiva personalizada. Você pode delegar a tarefa de adicionar itens divisores ao código se não se importar um pouco com jQuery.

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

Uma diretiva tão simples realmente não precisa de um valor de atributo, mas pode dar a você muitas possibilidades, como adicionar condicionalmente um divisor de acordo com o índice, comprimento, etc. ou algo completamente diferente.

Recentemente, tive o mesmo problema em que tive que repetir uma coleção arbitrária de extensões e imagens - ter um elemento ao redor deles não era uma opção - há uma solução simples, no entanto, crie uma diretiva "nula":

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

Você pode então usar uma repetição nesse elemento, onde element.url aponta para o modelo desse elemento:

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

Isso repetirá qualquer número de modelos diferentes, sem nenhum contêiner em torno deles

Nota: hmm eu poderia ter jurado às cegas, isso removeu o elemento di-null durante a renderização, mas verificá-lo novamente ... ainda resolveu meus problemas de layout ... curioso e curioso ...

Há uma restrição de diretiva de comentário, mas ngRepeat não a suporta (uma vez que precisa de um elemento para repetir).

Acho que vi a equipe angular dizer que trabalharia com repetições de comentários, mas não tenho certeza. Você deve abrir um problema para ele no repo. http://github.com/angular/angular.js

Não existe uma maneira mágica do Angular de fazer isso; para o seu caso, você pode fazer isso, para obter um HTML válido, se estiver usando o Bootstrap. Então você obterá o mesmo efeito que adicionar o li.divider

Crie uma classe:

span.divider {
 display: block;
}

Agora mude seu código para este:

<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>

para uma solução que realmente funcione

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>

adicione uma diretiva 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]);
}());

para uma breve explicação,

ng-repeat se liga ao <remove>elemento e faz um loop como deveria, e como usamos ng-repeat-start / ng-repeat-end ele faz um loop em um bloco de html, não apenas em um elemento.

então a diretiva de remoção personalizada coloca os <remove>elementos de início e fim com<!--removed element-->