AngularJS For Loop with Numbers Ranges

Question

Angular does provide some support for a for loop using numbers within its HTML directives    lt div data-ng-repeat  i in  1 2 3 4 5   gt    do something  lt  div gt    But if your scope variable includes a range that has a dynamic number then you will need to create an empty array each time   In the controller  var range       for var i 0 i lt total i        range push i      scope range   range    In the HTML   lt div data-ng-repeat  i in range  gt    do something  lt  div gt    This works  but it is unnecessary since we won t be using the range array at all within the loop  Does anyone know of setting a range or a regular for min max value    Something like    lt div data-ng-repeat  i in 1    100  gt    do something  lt  div gt

User · Answer

I came up with a slightly different syntax which suits me a little bit more and adds an optional lower bound as well:

myApp.filter('makeRange', function() {
        return function(input) {
            var lowBound, highBound;
            switch (input.length) {
            case 1:
                lowBound = 0;
                highBound = parseInt(input[0]) - 1;
                break;
            case 2:
                lowBound = parseInt(input[0]);
                highBound = parseInt(input[1]);
                break;
            default:
                return input;
            }
            var result = [];
            for (var i = lowBound; i <= highBound; i++)
                result.push(i);
            return result;
        };
    });

which you can use as

<div ng-repeat="n in [10] | makeRange">Do something 0..9: {{n}}</div>

or

<div ng-repeat="n in [20, 29] | makeRange">Do something 20..29: {{n}}</div>

User · Answer

This is jzm s improved answer  i cannot comment else i would comment her his answer because s he included errors   The function has a start end range value  so it s more flexible  and    it works  This particular case is for day of month    scope rangeCreator   function  minVal  maxVal        var arr          for  var i   minVal  i  lt   maxVal  i            arr push i           return arr        lt div class  col-sm-1  gt       lt select ng-model  monthDays  gt           lt option ng-repeat  day in rangeCreator 1 31   gt   day   lt  option gt       lt  select gt   lt  div gt

User · Answer

An improvement to  Mormegil s solution  app filter  makeRange   function       return function inp        var range     inp 1   amp  amp   inp 0     0   inp 1      inp 0        var min   Math min range 0   range 1        var max   Math max range 0   range 1        var result           for  var i   min  i  lt   max  i    result push i       if  range 0   gt  range 1   result reverse        return result             usage   lt span ng-repeat  n in  3  -3    makeRange  ng-bind  n  gt  lt  span gt    3 2 1 0 -1 -2 -3   lt span ng-repeat  n in  -3  3    makeRange  ng-bind  n  gt  lt  span gt    -3 -2 -1 0 1 2 3   lt span ng-repeat  n in  3    makeRange  ng-bind  n  gt  lt  span gt    0 1 2 3   lt span ng-repeat  n in  -3    makeRange  ng-bind  n  gt  lt  span gt    0 -1 -2 -3

User · Answer

Without any change in your controller  you can use this    ng-repeat    in            amp  amp     length 51   amp  amp     track by  index    Enjoy

User · Answer

Simplest no code solution was to init an array with the range  and use the  index   however much I want to offset by    lt select ng-init    Array       length   5   gt       lt option ng-repeat  i in  Array track by  index  gt    index 5   lt  option gt   lt  select gt

User · Answer

You can use  after  or  before  filters in angular filter module  https   github com a8m angular-filter    scope list    1 2 3 4 5 6 7 8 9 10    HTML    lt li ng-repeat  i in list   after 4  gt       i     lt  li gt    result   5  6  7  8  9  10

User · Answer

Hi you can achieve this using pure html using AngularJS  NO Directive is required     lt div ng-app  myapp  ng-controller  YourCtrl  ng-init  x  5    gt     lt div ng-if  i gt 0  ng-repeat  i in x  gt       lt  -- this content will repeat for 5 times  -- gt       lt table class  table table-striped  gt         lt tr ng-repeat  person in people  gt            lt td gt    person first         person last    lt  td gt         lt  tr gt       lt  table gt       lt p ng-init  x push i-1   gt  lt  p gt     lt  div gt   lt  div gt

User · Answer

A short way of doing this would be to use Underscore js s   range   method      http   underscorejs org  range     declare in your controller or wrap   range in a function that returns a dynamic range  var range     range 1  11       val will be each number in the array not the index   lt div ng-repeat  val in range  gt          index        val     lt  div gt

User · Answer

I use my custom ng-repeat-range directive          Ng-Repeat implementation working with number ranges         author Umed Khudoiberdiev     angular module  commonsMain   directive  ngRepeatRange      compile   function   compile        return           replace  true          scope    from       to       step                  link  function  scope  element  attrs                    returns an array with the range of numbers                you can use   range instead if you use underscore             function range from  to  step                    var array                       while  from   step  lt   to                      array array length    from    step                   return array                                prepare range options             var from   scope from    0              var step   scope step    1              var to     scope to    attrs ngRepeatRange                  get range of numbers  convert to the string and add ng-repeat             var rangeString   range from  to   1  step  join                   angular element element  attr  ng-repeat    n in      rangeString                     angular element element  removeAttr  ng-repeat-range                  compile element  scope                           and html code is    lt div ng-repeat-range from  0  to  20  step  5  gt      Hello 4 times   lt  div gt    or simply   lt div ng-repeat-range from  5  to  10  gt      Hello 5 times   lt  div gt    or even simply   lt div ng-repeat-range to  3  gt      Hello 3 times   lt  div gt    or just   lt div ng-repeat-range  7  gt      Hello 7 times   lt  div gt

User · Answer

For those new to angularjs  The index can be gotten by using  index   For example    lt div ng-repeat  n in      range 10  gt      do something number    index    lt  div gt    Which will  when you re using Gloopy s handy filter  print  do something number 0 do something number 1 do something number 2 do something number 3 do something number 4 do something number 5 do something number 6 do something number 7 do something number 8 do something number 9

User · Answer

Late to the party  But i ended up just doing this   In your controller    scope repeater   function  range        var arr            for  var i   0  i  lt  range  i              arr push i             return arr      Html    lt select ng-model  myRange  gt       lt option gt 3 lt  option gt       lt option gt 5 lt  option gt   lt  select gt    lt div ng-repeat  i in repeater myRange   gt  lt  div gt

User · Answer

I tweaked this answer a bit and came up with this fiddle   Filter defined as   var myApp   angular module  myApp        myApp filter  range   function       return function input  total        total   parseInt total        for  var i 0  i lt total  i            input push i              return input             With the repeat used like this    lt div ng-repeat  n in      range 100  gt    do something  lt  div gt

User · Answer

Method definition  The code below defines a method range   available to the entire scope of your application MyApp  Its behaviour is very similar to the Python range   method   angular module  MyApp   run    rootScope   function  rootScope         rootScope range   function min  max  step               parameters validation for method overloading         if  max    undefined                max   min              min   0                    step   Math abs step     1          if  min  gt  max                step   -step                       building the array         var output               for  var value min  value lt max  value  step                output push value                        returning the generated array         return output                Usage  With one parameter    lt span ng-repeat  i in range 3   gt    i      lt  span gt    0  1  2   With two parameters    lt span ng-repeat  i in range 1  5   gt    i      lt  span gt    1  2  3  4   With three parameters    lt span ng-repeat  i in range -2   7   5   gt    i      lt  span gt    -2  -1 5  -1  -0 5  0  0 5

User · Answer

I came up with an even simpler version  for creating a range between two defined numbers  eg  5 to 15  See demo on JSFiddle  HTML    lt ul gt       lt li ng-repeat  n in range 5 15   gt Number   n   lt  li gt   lt  ul gt    Controller    scope range   function min  max  step        step   step    1      var input           for  var i   min  i  lt   max  i    step            input push i             return input

User · Answer

Using UnderscoreJS   angular module  myModule        run    rootScope   function  rootScope     rootScope range     range         Applying this to  rootScope makes it available everywhere    lt div ng-repeat  x in range 1 10   gt        x    lt  div gt

User · Answer

Nothing but plain Javascript  you don t even need a controller     lt div ng-repeat  n in    constructor 10  track by  index  gt          index     lt  div gt    Very useful when mockuping

User · Answer

I tried the following and it worked just fine for me    lt md-radio-button ng-repeat  position in formInput arrayOfChoices slice 0 6   value    position    gt   position   lt  md-radio-button gt    Angular 1 3 6

User · Answer

Very simple one    scope totalPages   new Array 10      lt div id  pagination  gt       lt a ng-repeat  i in totalPages track by  index  gt           index 1        lt  a gt       lt  div gt

User · Answer

I whipped this up and saw it might be useful for some   Yes  CoffeeScript  Sue me    Directive  app directive  times   - gt    link   scope  element  attrs  - gt      repeater   element html       scope  watch attrs times   value  - gt        element html          return unless value        element html Array value   1  join repeater    To use   HTML   lt div times  customer conversations count  gt     lt i class  icon-picture gt  lt  i gt   lt  div gt    Can this get any simpler   I m wary about filters because Angular likes to re-evaluate them for no good reason all the time  and it s a huge bottleneck if you have thousands of them like I do   This directive will even watch for changes in your model  and update the element accordingly

User · Answer

Set Scope in controller  var range       for var i 20 i lt  70 i        range push i      scope driverAges   range    Set Repeat in Html Template File   lt select type  text  class  form-control  name  driver age  id  driver age  gt        lt option ng-repeat  age in driverAges  value    age    gt   age   lt  option gt   lt  select gt

User · Answer

lt div ng-init  avatars     id   0    flag   true   gt     lt div ng-repeat  data in avatars  ng-if  avatars length  lt  10    flag         ng-init  avatars length    10   avatars push  id    index 1         flag   avatars length  lt   10   true   false  gt       lt img ng-src  http   actual-names com wp-content uploads 2016 01 sanskrit-baby-girl-names-400x275 jpg  gt     lt  div gt   lt  div gt    If you want to achieve this in html without any controller or factory

User · Answer

Suppose  scope refernceurl is an array then     for var i 0  i lt  scope refernceurl length  i          scope urls   scope refernceurl i  link

User · Answer

This is the simplest variant   just use array of integers       x000D   x000D    lt li ng-repeat  n in  1 2 3 4 5   gt test   n   lt  li gt  x000D   x000D   x000D

User · Answer

Shortest answer  2 lines of code  JS  in your AngularJS controller    scope range   new Array MAX REPEATS      MAX REPEATS should be the most repetitions you will ever need in a single ng-repeat   HTML   lt div data-ng-repeat  i in range slice 0 myCount  track by  index  gt  lt  div gt       where myCount is the number of stars that should appear in this location   You can use  index for any tracking operations  E g  if you want to print some mutation on the index  you might put the following in the div        index   1    0 5

[angularjs] AngularJS For Loop with Numbers & Ranges

Examples related to angularjs

Examples related to angularjs-ng-repeat