KnockoutJS containerless binding syntax

Kindly wait for a moment: KnockoutJS provides a convenient feature of using a containerless binding syntax for its foreach binding, as mentioned in Note 4 of the foreach binding documentation.

The example in the Knockout documentation shows how you can write your bindings like this:

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

I find it disappointing that AngularJS does not offer a similar syntax.

Angular's ng-repeat-start and ng-repeat-end

When dealing with ng-repeat in AngularJS, most examples, like the one jmagnusson shared in their answer, follow this pattern:

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

Initially, I questioned why Angular requires additional markup compared to Knockout, which handles it more elegantly. However, upon reading hitautodestruct's comment on jmagnusson's answer, I started pondering about the purpose of using ng-repeat-start and ng-repeat-end on separate tags.

A cleaner way to use ng-repeat-start and ng-repeat-end

After examining hitautodestruct's claim, I realized that placing ng-repeat-end on a separate tag creates unnecessary elements, such as empty <li> items. While Bootstrap 3 styles these items to appear hidden, they still clutter the generated HTML.

Thankfully, there is a simpler solution to reduce HTML bloat: combine the ng-repeat-end declaration with the same tag as 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>

This approach offers three benefits:

1. Reduced number of HTML tags
2. Elimination of useless, empty tags generated by Angular
3. Avoidance of generating the ng-repeat tag when the array is empty, mirroring Knockout's efficient handling

But there is still a cleaner way

Upon further exploration of comments on this issue in Angular's GitHub repository (https://github.com/angular/angular.js/issues/1891),
it appears that we can achieve the same advantages without using ng-repeat-start and ng-repeat-end. Borrowing from jmagnusson's example once more, a simplified version would look like:

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

So when should you utilize ng-repeat-start and ng-repeat-end? According to the angular documentation, it's ideal

...for repeating a series of elements rather than just a single parent element...

Enough talk, let's see some examples!

Fair point; here's a jsbin showcasing five examples of the impact of using or omitting ng-repeat-end on the same tag.

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

If you find that ngRepeat alone is not sufficient for your needs, consider using a custom directive in combination with it. By incorporating a bit of jQuery, you can offload the task of adding divider items to your code.

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

While a simple directive like this may not require an attribute value, it opens up many possibilities for dynamically adding dividers based on factors such as index, length, or any other criteria you choose.

Dealing with a situation where I needed to repeat various spans and images without wrapping them in an element led me to find a simple solution - creating a custom "null" directive:

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

By using this directive, you can iterate through different templates by setting the element.url attribute:

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

This method allows for repeating multiple templates without adding any extra container elements.

Note: Initially, I thought the di-null element would be removed during rendering, but after rechecking, it seems that's not the case. Nevertheless, it still helped resolve my layout problems. Quite intriguing...

for an effective solution

create in HTML

<remove  ng-repeat-start="itemGroup in Groups" ></remove>
   include HTML content here, including nested loops if necessary
<remove  ng-repeat-end></remove>

implement an angular.js directive

//custom 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]);
}());

explaining briefly,

ng-repeat is bound to the <remove> element and iterates as expected, allowing for a block of HTML to be looped through due to the use of ng-repeat-start / ng-repeat-end.

subsequently, the custom remove directive replaces the <remove> start and end elements with <!--removed element-->

Although there is a restriction on comment directives, ngRepeat does not currently support it since it requires an element to repeat.

I vaguely recall the angular team mentioning they may work on enabling comment ng-repeats in the future, but I cannot confirm. If you're interested, you can submit an issue about this on the repository. http://github.com/angular/angular.js

If you're looking for a straightforward solution without relying on Angular magic, consider following these steps to achieve valid HTML. Specifically, if Bootstrap is part of your toolkit, this approach will simulate the effect of adding the li.divider element.

Start by creating a custom class:

span.divider {
 display: block;
}

Next, update your code as shown below:

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