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 up 5 times assuming  scope number equal to 5 in addition incrementing the number so each list item increments like 1  2  3  4  5  Desired result    lt ul gt      lt li gt  lt span gt 1 lt  span gt  lt  li gt      lt li gt  lt span gt 2 lt  span gt  lt  li gt      lt li gt  lt span gt 3 lt  span gt  lt  li gt      lt li gt  lt span gt 4 lt  span gt  lt  li gt      lt li gt  lt span gt 5 lt  span gt  lt  li gt   lt  ul gt

User · Answer

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.

User · Answer

you can do this    lt div ng-repeat  i in  1  2  3  4   gt         lt  div gt

User · Answer

If n is not too high  another option could be to use split     with a string of n characters     lt div ng-controller  MainCtrl  gt   lt div ng-repeat  a in  abcdefgh  split      gt    index   lt  div gt   lt  div gt

User · Answer

Heres an answer for angular 1 2 x  Basically it is the same  with the slight modification of of the ng-repeat    lt li ng-repeat  i in getNumber myNumber  track by  index  gt    here is the fiddle  http   jsfiddle net cHQLH 153   this is because angular 1 2 doesn t allow duplicate values in the directive  This means if you are trying to do the following  you will get an error    lt li ng-repeat  x in  1 1 1   gt  lt  li gt

User · Answer

I wanted to keep my html very minimal  so defined a small filter that creates the array  0 1 2      as others have done   angular module  awesomeApp      filter  range   function        return function n          var res             for  var i   0  i  lt  n  i              res push i                 return res                 After that  on the view is possible to use like this    lt ul gt     lt li ng-repeat  i in 5   range  gt        i 1    lt  -- the array will range from 0 to 4 -- gt     lt  li gt   lt  ul gt

User · Answer

scope number   5    lt div ng-repeat  n in      range  scope number  gt         lt span gt    index   lt  span gt   lt  div gt

User · Answer

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    lt span ng-repeat-n  4  gt    index   lt  span   produces  1234  It also works using a scope variable    lt span ng-repeat-n  repeatNum  gt  lt  span gt    Source   Github

User · Answer

since iterating over a string it will render an item for each char    lt li ng-repeat    k in  aaaa  track by  index  gt        index     THIS DOESN T ANSWER OP S QUESTION  Read below   lt  li gt    we can use this ugly but no-code workaround using the number n decimal places native filter     lt li ng-repeat  k in  0 number mynumber -2   track by  index  gt         index     lt  li gt    this way we ll have mynumber elements with no extra code  Say  0 000   We use mynumber - 2 to compensate 0  It won t work for numbers below 3  but might be useful in some cases

User · Answer

This is really UGLY  but it works without a controller for either an integer or variable   integer    lt span ng-repeat    in            amp  amp     length 33   amp  amp     track by  index  gt    index   lt  span gt    variable    lt span ng-repeat    in            amp  amp     length myVar   amp  amp     track by  index  gt    index   lt  span gt

User · Answer

simple way       public defaultCompetences  Array lt number gt     1  2  3     in the component controller and then        lt div ng-repeat  i in  ctrl defaultCompetences track by  index  gt    This code is from my typescript project but could be rearranged to pure javascript

User · Answer

Easiest answer  2 lines of code  JS  in your AngularJS controller    scope range   new Array MAX REPEATS      set MAX REPEATS to the most repetitions you will ever need in a single ng-repeat that makes use of this strategy   HTML   lt div ng-repeat  i in range slice 0 repeatCount  track by  index  gt  lt  div gt       where repeatCount is the number of repetitions that should appear in this location

User · Answer

angular gives a very sweet function called slice   using this you can achieve what you are looking for  e g  ng-repeat  ab in abc slice startIndex endIndex    this demo  http   jsfiddle net sahilosheal LurcV 39  will help you out and tell you how to use this  making life easy  function      html    lt div class  div  ng-app  gt       lt div ng-controller  Main  gt           lt h2 gt sliced list conditional NG-repeat  lt  h2 gt           lt ul ng-controller  ctrlParent  gt               lt li ng-repeat  ab in abc slice 2 5   gt  lt span gt    index 1        ab name    lt  span gt  lt  li gt           lt  ul gt           lt h2 gt unsliced list  no conditional NG-repeat  lt  h2 gt            lt ul ng-controller  ctrlParent  gt               lt li ng-repeat  ab in abc  gt  lt span gt    index 1        ab name    lt  span gt  lt  li gt           lt  ul gt        lt  div gt    CSS   ul   list-style  none     div      padding 25px    li      background  d4d4d4      color  052349      ng-JS    function ctrlParent   scope         scope abc             name    What we do   url    Home AboutUs             name    Photo Gallery   url    home gallery             name    What we work   url    Home AboutUs             name    Photo play   url    home gallery             name    Where   url    Home AboutUs             name    playground   url    home gallery             name    What we score   url    Home AboutUs             name    awesome   url    home gallery             name    oscar   url    Home AboutUs             name    american hustle   url    home gallery             function Main  scope        scope items     sort  1  name   First                          sort  2  name   Second                          sort  3  name   Third                          sort  4  name  Last

User · Answer

Here is an example of how you could do this   Note that I was inspired by a comment in the ng-repeat docs  http   jsfiddle net digitalzebra wnWY6   Note the ng-repeat directive    lt div ng-app gt       lt div ng-controller  TestCtrl  gt           lt div ng-repeat  a in range 5  track by  index  gt    index   1   lt  div gt       lt  div gt   lt  div gt    Here is the controller   function TestCtrl  scope         scope range   function n            return new Array n

User · Answer

I think this jsFiddle from this thread might be what you re looking for    lt div ng-app ng-controller  Main  gt      lt div ng-repeat  item in items   limitTo 2  gt           item name       lt  div gt   lt  div gt

User · Answer

I needed a more dynamic solution to this - where I could increment the repeat   HTML    lt div ng-repeat  n in newUserCount  gt   lt input type  text  value    name  newuser  n     gt   lt  div gt    Duplicator Control   lt span class  helper  ng-click  duplicateUser    gt  Create another user with the same permissions  lt  span gt    JS    scope newUserCount   Array  1    var primaryValue   1   scope duplicateUser   function         primaryValue         scope newUserCount push primaryValue

User · Answer

Update  9 25 2018  Newer versions of AngularJS   gt   1 3 0  allow you to do this with only a variable  no function needed    lt li ng-repeat  quot x in    constructor number  track by  index quot  gt       lt span gt     index 1    lt  span gt   lt  li gt    scope number   5   This was not possible at the time the question was first asked   Credit to  Nikhil Nambiar from his answer below for this update  Original  5 29 2013  At the moment  ng-repeat only accepts a collection as a parameter  but you could do this   lt li ng-repeat  quot i in getNumber number  quot  gt       lt span gt     index 1    lt  span gt   lt  li gt   And somewhere in your controller   scope number   5   scope getNumber   function num        return new Array num         This would allow you to change  scope number to any number as you please and still maintain the binding you re looking for  EDIT  1 6 2014  -- Newer versions of AngularJS   gt   1 1 5  require track by  index   lt li ng-repeat  quot i in getNumber number  track by  index quot  gt       lt span gt     index 1    lt  span gt   lt  li gt   Here is a fiddle with a couple of lists using the same getNumber function

User · Answer

You can use the ng-if directive with ng-repeat  So  if num is the number of times you need the element repeated    lt li ng-repeat  item in list  ng-if   index  lt  num  gt

User · Answer

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    lt span ng-repeat  i in 5   times  gt    lt  --DO STUFF-- gt   lt  span gt    or    lt span ng-repeat  i in myVar   times  gt    lt  --DO STUFF-- gt   lt  span gt

User · Answer

You can use this example   Inside controller    scope data          myVal   33       maxVal   55       indexCount   function count            var cnt   10          if  typeof count      number                 cnt   count                    return new Array cnt              Example for select element at the HTML code side    lt select ng-model  data myVal  value     data myVal     gt       lt option ng-repeat  i in data indexCount data maxVal  track by  index  value      index   1     gt     index   1    lt  option gt   lt  select gt

User · Answer

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    lt div id  demo  gt       lt ul gt           lt li ng-repeat  not in    fixedNumber number track by  index  gt    index   lt  li gt       lt  ul gt   lt  div gt    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

User · Answer

I ran into the same issue   I came across this thread  but didn t like the methods they had here   My solution was using underscore js  which we had already installed   It s as simple as this    lt ul gt       lt li ng-repeat  n in   range 1 6   gt  lt span gt   n   lt  span gt  lt  li gt   lt  ul gt    This will do exactly what you re looking for

User · Answer

A simpler approach would be  for an example of 5 times     lt div ng-repeat  x in    constructor 5  track by  index  gt              lt  div gt

User · Answer

This is only a slight variation on the accepted answer  but you don t really need to create a new function  Only to import  Array  in the scope    lt div ng-app  myapp  gt       lt div ng-controller  ctrlParent  gt           lt ul gt               lt li ng-repeat  i in counter 5  track by  index  gt                 lt span gt    index 1   lt  span gt  lt  li gt           lt  ul gt       lt  div gt   lt  div gt      var app   angular module  myapp       app controller  ctrlParent  function  scope        scope myNumber   5       scope counter   Array        See this fiddle for a live example

User · Answer

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    lt ul gt      lt li ng-repeat  n in  12345   gt  lt span gt   n   lt  span gt  lt  li gt   lt  ul gt    Which is a bit jenky  sure  but simple enough to look at and not particularly confusing

User · Answer

For users using CoffeeScript  you can use a range comprehension   Directive    link   scope  element  attrs  - gt    scope range    1   attrs range    or Controller      scope range    1    someVariable   scope range    1  5    Or just an integer   Template     lt div ng-repeat  i in range  gt   the rest of your code   lt  div gt

User · Answer

I am creating a reusable directive where the max number will come from another ng-repeat  So  this is an edit over the best voted answer    Just change the code at controller to this -   scope getNumber   function num        var temp           for var j   0  j  lt  num  j             temp push j            return temp       This will return a new array with specified number of iterations

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

Examples related to javascript

Examples related to html

Examples related to angularjs

Examples related to angularjs-ng-repeat