AngularJS ng-repeat avec aucun élément html

Question

Je suis actuellement en utilisant ce bout de code pour afficher une liste:

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

Cependant, l' <div> élément est à l'origine de très légers rendu des défauts sur certains navigateurs. Je voudrais savoir est-il un moyen de faire le ng-repeat sans le div conteneur, ou une autre méthode pour obtenir le même effet.

Answer 1

Comme Andy Joslin ont déclaré qu'ils travaillaient sur le commentaire en fonction ng-répète mais apparemment, il y avait trop de problèmes de navigateur. Heureusement, AngularJS 1.2 ajoute la prise en charge intégrée de la répéter sans l'ajout d'éléments d'enfant avec les nouvelles directives de l' ng-repeat-start et ng-repeat-end.

Voici un petit exemple pour l'ajout de Bootstrap pagination:

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

Un travail plein de exemple peut être trouvé ici.

Jean-Lindquist a également un tutoriel vidéo de ce plus à son excellente tête d'oeuf.io page.

Answer 2

KnockoutJS containerless syntaxe de liaison

S'il vous plaît garder avec moi une seconde: KnockoutJS propose une ultra-option pratique de l'aide d'un containerless syntaxe de liaison pour son foreach de liaison comme mentionné dans la Note 4 de l' foreach de la liaison de la documentation. http://knockoutjs.com/documentation/foreach-binding.html

Comme le knock-out de la documentation montre l'exemple, vous pouvez écrire votre liaison en KnockoutJS comme ceci:

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

Je pense que c'est plutôt malheureux, AngularJS n'offre pas ce type de syntaxe.

---

Angulaire de l' ng-repeat-start et ng-repeat-end

Dans le AngularJS façon de résoudre ng-repeat problèmes, les échantillons que j'ai trouver sont du type jmagnusson posté dans son (très utile) réponse.

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

Ma pensée originale en voyant cette syntaxe est: vraiment? Pourquoi est-Angulaire de forcer le balisage que je ne veux rien avoir à faire avec et c'est beaucoup plus facile dans knock-out? Mais alors hitautodestruct commentaire dans jmagnusson de répondre à commencé à me faire me demande: quel est généré avec ng-repeat, lancez-ng-repeat-end à séparer les tags?

---

D'une façon plus propre d'utiliser ng-repeat-start et ng-repeat-end

Lors de l'enquête de hitautodestruct de l'assertion, l'ajout d' ng-repeat-end sur à un autre tag est exactement ce que j'aurais pas envie de faire dans la plupart des cas, car il génère totalement usesless éléments: dans ce cas, <li> des éléments qui n'ont rien en eux. Bootstrap 3 est paginé styles de liste les éléments de la liste, de sorte qu'il semble que vous ne générez pas de superflu, mais lorsque vous examinez le code html généré, ils sont là.

Heureusement, vous n'avez pas besoin de faire beaucoup de ont une solution plus propre et par une réduction de la quantité de html: il suffit de mettre la ng-repeat-end déclaration sur la même balise html qui a l' 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>

Cela donne 3 avantages:

1. moins des balises html à écrire
2. inutile, vide les balises ne sont pas générés par Angulaire
3. lorsque le tableau de répéter est vide, le tag avec ng-repeat ne sera pas générée, de vous donner le même avantage knock-out du containerless de liaison vous donne à cet égard

---

Mais il y a encore une manière plus propre

Après plus de passer en revue les commentaires sur github sur cette question Angulaire, https://github.com/angular/angular.js/issues/1891,
vous n'avez pas besoin d'utiliser ng-repeat-start et ng-repeat-end pour atteindre les mêmes avantages. Au lieu de cela, bifurquer à nouveau jmagnusson exemple, on peut juste aller:

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

Donc quand utiliser ng-repeat-start et ng-repeat-end? Comme par l' angulaire de la documentation, de

...répéter une série d'éléments au lieu d'un seul élément parent...

Assez parler, de montrer quelques exemples!

Juste assez; ce jsbin promenades à travers cinq exemples de ce qui se passe quand vous faites et quand vous ne l'utilisez pas ng-repeat-end sur la même étiquette.

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

Answer 3

ngRepeat peut-être pas assez, cependant, vous pouvez combiner cela avec un custom directive. Vous pourriez déléguer la tâche de l'ajout de diviseur éléments de code si vous n'avez pas l'esprit un peu de jQuery.

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

Telle une simple directive n'a pas vraiment besoin d'une valeur d'attribut, mais peut vous donner beaucoup de possibilités comme conditionnellement l'ajout d'un séparateur selon l'indice, la longueur, etc ou quelque chose de complètement différent.

Answer 4

J'ai récemment eu le même problème que j'ai eu à répéter une collection arbitraire des travées et des images ayant un élément autour d'eux n'était pas une option - il y a une solution simple, cependant, de créer un "null" directive:

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

Vous pouvez ensuite utiliser le répéter sur cet Élément, où l'élément.url pointe vers le modèle de l'élément:

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

Cette fonction permet de répéter un nombre de modèles différents avec pas de conteneur autour d'eux

Note: hmm, j'aurais pu jurer aveugle cette enlevés, le di-élément null lors du rendu, mais de vérifier à nouveau, il n'est pas...encore résolu mes problèmes d'implantation...curioser et curioser...

Answer 5

Il y a un commentaire de la directive de restriction, mais ngRepeat ne le supporte pas (car il a besoin d'un élément à répéter).

Je pense que j'ai vu l'angle de l'équipe de dire s'ils fonctionnaient sur des commentaires ng-se répète, mais je ne suis pas sûr. Vous devez ouvrir une question sur le repo. http://github.com/angular/angular.js