AngularJS For Loop with Numbers & Ranges

Question

Angular does provide some support for a for loop using numbers within its HTML directives:

<div data-ng-repeat="i in [1,2,3,4,5]"> 

 do something
</div>

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<total;i++) { 

   range.push(i); 

} 

$scope.range = range;

In the HTML

<div data-ng-repeat="i in range">

  do something 

</div>

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:

<div data-ng-repeat="i in 1 .. 100"> 

   do something 

</div>

Answer 1

You can use the below-mentioned code for looping AngularJS with Numbers & Ranges:-

var myApp = angular.module('myApp', []); ]

myApp.filter('range', function() { 

      return function(input, total) { 

          total = parseInt(total); 

          for (var i=0; i<total; i++) { 

            input.push(i); 

          } 

          return input; 

      }; 

});

Looking for Angularjs material from basics! Refer to this video on Angularjs provided by Intellipaat:

With the repeat used like this:-

<div ng-repeat="n in [] | range:100"> 

  do something 

</div>

Answer 2

You can filter defined as follows:

var this_App = angular.module('this_App', []);
this_App.filter('range', function() {
return function(input, total) {
total = parseInt(total);
for (var a=0; a<total; a++)
{
input.push(a);
}
return input;
};
});

When the repeat is used like this:
<div ng-repeat="n in [] | range:100">
do something
</div>