AngularJS For Loop con números y rangos

Ajusté esta respuesta un poco y se me ocurrió este violín .

Filtro definido como:

 var myApp = angular.module('myApp', []); myApp.filter('range', function() { return function(input, total) { total = parseInt(total); for (var i=0; i 

Con la repetición usada así:

 
 do something  

Se me ocurrió una versión aún más simple, para crear un rango entre dos números definidos, por ejemplo. 5 a 15

Vea la demostración en JSFiddle

HTML :

 
 
Number {{n}}
  

Controlador :

 $scope.range = function(min, max, step) { step = step || 1; var input = []; for (var i = min; i < = max; i += step) { input.push(i); } return input; }; 

Nada más que Javascript simple (ni siquiera necesitas un controlador):

 
 {{ $index }}  

Muy útil cuando se burla

Se me ocurrió una syntax ligeramente diferente que me queda un poco más y agrega un límite inferior opcional también:

 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; }; }); 

que puedes usar como

 
Do something 0..9: {{n}} 

o

 
Do something 20..29: {{n}} 

Para aquellos nuevos en angularjs. El índice se puede obtener usando $ index.

Por ejemplo:

 
 do something number {{$index}}  

Cuando use el filtro práctico de Gloopy, imprima lo siguiente:
hacer algo numero 0
hacer algo numero 1
hacer algo número 2
hacer algo número 3
hacer algo número 4
hacer algo número 5
hacer algo número 6
hacer algo número 7
hacer algo número 8
hacer algo número 9

Una forma breve de hacer esto sería usar el método _.range () de Underscore.js. 🙂

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. 
 {{ $index }}: {{ val }}  

Uso mi directiva personalizada ng-repeat-range :

 /** * 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 < = 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); } }; }]); 

y el código html es

 
 Hello 4 times!  

o simplemente

 
 Hello 5 times!  

o incluso simplemente

 
 Hello 3 times!  

o solo

 
 Hello 7 times!  

La solución de código más simple era iniciar una matriz con el rango, y usar el índice $ + por mucho que desee compensarlo:

  {{$index+5}}  

Puede usar filtros ‘after’ o ‘before’ en el módulo angular.filter ( https://github.com/a8m/angular-filter )

 $scope.list = [1,2,3,4,5,6,7,8,9,10] 

HTML:

 
 {{ i }}  

resultado: 5, 6, 7, 8, 9, 10

Definición del método

El siguiente código define un range() método range() disponible para todo el scope de su aplicación MyApp . Su comportamiento es muy similar al método Python range() .

 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 > max) { step = -step; } // building the array var output = []; for (var value=min; value 

Uso

Con un parámetro:

 {{ i }},  

0, 1, 2,

Con dos parámetros:

 {{ i }},  

1, 2, 3, 4,

Con tres parámetros:

 {{ i }},  

-2, -1.5, -1, -0.5, 0, 0.5,

La respuesta más corta: 2 líneas de código

JS (en su controlador AngularJS)

 $scope.range = new Array(MAX_REPEATS); // MAX_REPEATS should be the most repetitions you will ever need in a single ng-repeat 

HTML

… donde myCount es la cantidad de estrellas que deberían aparecer en esta ubicación.

Puede usar $index para cualquier operación de rastreo. Por ejemplo, si quieres imprimir alguna mutación en el índice, puedes poner lo siguiente en el div :

 {{ ($index + 1) * 0.5 }} 

Sin ningún cambio en su controlador, puede usar esto:

 ng-repeat="_ in ((_ = []) && (_.length=51) && _) track by $index" 

¡Disfrutar!

Usando UnderscoreJS:

 angular.module('myModule') .run(['$rootScope', function($rootScope) { $rootScope.range = _.range; }]); 

Al aplicar esto a $rootScope , estará disponible en todas partes:

 
 {{x}}  

Muy simple:

 $scope.totalPages = new Array(10); 
  {{$index+1}}   

Establecer el scope en el controlador

 var range = []; for(var i=20;i< =70;i++) { range.push(i); } $scope.driverAges = range; 

Establecer repetición en archivo de plantilla Html

  {{age}}  

Una mejora a la solución de @ Mormegil

 app.filter('makeRange', function() { return function(inp) { var range = [+inp[1] && +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 < = max; i++) result.push(i); if (range[0] > range[1]) result.reverse(); return result; }; }); 

uso

3 2 1 0 -1 -2 -3

-3 -2 -1 0 1 2 3

0 1 2 3

0 -1 -2 -3

Intenté lo siguiente y funcionó bien para mí:

 {{position}} 

Angular 1.3.6

Esta es la respuesta mejorada de jzm (no puedo comentar otra cosa, comentaría su respuesta porque incluía errores). La función tiene un valor de rango de inicio / final, por lo que es más flexible y … funciona. Este caso particular es para el día del mes:

 $scope.rangeCreator = function (minVal, maxVal) { var arr = []; for (var i = minVal; i < = maxVal; i++) { arr.push(i); } return arr; }; 
  {{day}}   

Hola, puedes lograrlo usando html puro usando AngularJS (¡NO se requiere ninguna directiva!)

 
 
  
 
 
{{ person.first + ' ' + person.last }}
 
 
 
 
  

Arreglé esto y vi que podría ser útil para algunos. (Sí, CoffeeScript. Demandeme)

Directiva

 app.directive 'times', -> link: (scope, element, attrs) -> repeater = element.html() scope.$watch attrs.times, (value) -> element.html '' return unless value? element.html Array(value + 1).join(repeater) 

Usar:

HTML

 
 
		      	
  Tarde a la fiesta.  Pero terminé haciendo esto: 
  En tu controlador: 
 $scope.repeater = function (range) { var arr = []; for (var i = 0; i < range; i++) { arr.push(i); } return arr; } 
  Html: 
  3 5  
 



		      	
 
 
  
  
  Si desea lograr esto en html sin ningún controlador o fábrica. 



		      	
  Esta es la variante más simple: simplemente use una matriz de enteros …. 


  
test {{n}}