Angularjs ng-repeat with no HTML element

Efficient ways to implement ng-repeat

Using custom directives

Create a custom directive employing replace: true property for an uncomplicated ng-repeat operation without leaving behind any HTML residue.

<my-custom-repeat data="items"></my-custom-repeat>


It provides a leaner DOM structure, boosting performance and ensuring browser compatibility.

Null directive with ng-include combination

Pairing the null directive with ng-include can iterate elements effectively without the need for a container. Clean code gives your application a sleek look.

<!-- "null" directive with ng-include -->
<ng-include src="'item_template.html'" ng-repeat="item in items"></ng-include>


Removing directive for sleek implementation

A remove directive replaces ng-repeat containers with a comment, thus preserving the document flow and layout.

<!-- Apply custom "remove" directive -->
<div custom-remove ng-repeat="item in items"></div>


The implementation of this technique boosts performance, all the while reaping the benefits of ng-repeat.

Complementary approaches

Learning from KnockoutJS

KnockoutJS's containerless binding solution could be instrumental emulating a similar lighter syntax in AngularJS realm. Broadening horizons never hurts!

Leveraging Jsbin examples

Jsbin examples add multitude practical scenario experience to the repetitious usage of ng-repeat-end on the same tag. The best teachers are always the experienced ones.

<!-- ng-repeat-end illustration -->
<span class="item" ng-repeat-start="item in items">{{item}}</span>
<span ng-repeat-end></span>


Utilize custom list divider directive

Including dividers within loops with a custom list divider directive add space between list items, creating a visually appealing list. A little breathing space promotes clarity and readability.