Way to ng-repeat defined number of times instead of repeating over array?

Question

Is there a way to ng-repeat a defined number of times instead of always having to iterate over an array?

For example, below I want the list item to show

Answer 1

First, create an angular filter using LoDash:

angular.module('myApp').filter('times', function(){
   return function(value){
      return _.times(value || 0);
   }
});

The LoDash times function is capable of handling null, undefined, 0, numbers, and string representation of numbers.

Then, use it in your HTML as this:

<span ng-repeat="i in 5 | times">
 <!--DO STUFF-->
</span>

or

<span ng-repeat="i in myVar | times">
 <!--DO STUFF-->
</span>

Answer 2

Angular provides filters to modify a collection. In this case the collection would be null, i.e. [], and the filter also takes arguments, as follows:

<div id="demo">
    <ul>
        <li ng-repeat="not in []|fixedNumber:number track by $index">{{$index}}</li>
    </ul>
</div>

JS:

module.filter('fixedNumber', function() {
    return function(emptyarray, number) {
        return Array(number);
    }
});

module.controller('myCtrl', ['$scope', function($scope) {
    $scope.number = 5;
}]);

This method is very similar to those proposed above and isn't necessarily superior but shows the power of filters in AngularJS.

Answer 3

If n is not too high, another option could be to use split('') with a string of n characters :

<div ng-controller="MainCtrl">
<div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
</div>

Answer 4

There are many ways to do this. I was really bothered at having the logic in my controller so I created a simple directive to solve the problem of repeating an element n-times.

Installation:

The directive can be installed using bower install angular-repeat-n

Example:

<span ng-repeat-n="4">{{$index}}</span

produces: 1234

It also works using a scope variable:

<span ng-repeat-n="repeatNum"></span>

Source:

Github

Answer 5

Expanding a bit on Ivan's first answer a bit, you can use a string as the collection without a track by statement so long as the characters are unique, so if the use-case is less than 10 numbers as is the question I would simply do:

<ul>
   <li ng-repeat="n in '12345'"><span>{{n}}</span></li>
</ul>

Which is a bit jenky, sure, but simple enough to look at and not particularly confusing.

Answer 6

I encountered the same problem and this is what I came out with:

(function () {
  angular
    .module('app')
    .directive('repeatTimes', repeatTimes);

  function repeatTimes ($window, $compile) {
    return { link: link };

    function link (scope, element, attrs) {
      var times    = scope.$eval(attrs.repeatTimes),
          template = element.clone().removeAttr('repeat-times');

      $window._(times).times(function (i) {
        var _scope = angular.extend(scope.$new(), { '$index': i });
        var html = $compile(template.clone())(_scope);

        html.insertBefore(element);
      });

      element.remove();
    }
  }
})();

... and the html:

<div repeat-times="4">{{ $index }}</div>

LIVE EXAMPLE

I used underscore's times function as we where already using it on the project, but you can easily replace that with native code.