start index array angularjs angularjs-ng-repeat

angularjs - array - ng-repeat index



AngularJS para bucle con nĂºmeros y rangos (23)

Definición del método

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

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<max; value+=step) { output.push(value); } // returning the generated array return output; }; }]);

Uso

Con un parámetro:

<span ng-repeat="i in range(3)">{{ i }}, </span>

0, 1, 2,

Con dos parámetros:

<span ng-repeat="i in range(1, 5)">{{ i }}, </span>

1, 2, 3, 4,

Con tres parámetros:

<span ng-repeat="i in range(-2, .7, .5)">{{ i }}, </span>

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

Angular proporciona cierto soporte para un bucle for utilizando números dentro de sus directivas HTML:

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

Pero si su variable de alcance incluye un rango que tiene un número dinámico, tendrá que crear una matriz vacía cada vez.

En el controlador

var range = []; for(var i=0;i<total;i++) { range.push(i); } $scope.range = range;

En el HTML

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

Esto funciona, pero no es necesario ya que no usaremos la matriz de rango en el bucle. ¿Alguien sabe de establecer un rango o un valor regular para el valor mínimo / máximo?

Algo como:

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


Respuesta más corta: 2 líneas de código.

JS (en tu 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

<div data-ng-repeat="i in range.slice(0,myCount) track by $index"></div>

... donde myCount es el número de estrellas que deberían aparecer en esta ubicación.

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

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


Ajusté un poco esta respuesta 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<total; i++) { input.push(i); } return input; }; });

Con la repetición utilizada así:

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


Esta es la respuesta mejorada de jzm (no puedo comentar nada más, comentaré su respuesta porque incluyó errores). La función tiene un valor de rango de inicio / finalización, 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; }; <div class="col-sm-1"> <select ng-model="monthDays"> <option ng-repeat="day in rangeCreator(1,31)">{{day}}</option> </select> </div>


Esta es la variante más simple: solo usa una matriz de enteros ...

<li ng-repeat="n in [1,2,3,4,5]">test {{n}}</li>


Hola, puedes lograrlo usando HTML puro usando AngularJS (¡NO se requiere una directiva!)

<div ng-app="myapp" ng-controller="YourCtrl" ng-init="x=[5];"> <div ng-if="i>0" ng-repeat="i in x"> <!-- this content will repeat for 5 times. --> <table class="table table-striped"> <tr ng-repeat="person in people"> <td>{{ person.first + '' '' + person.last }}</td> </tr> </table> <p ng-init="x.push(i-1)"></p> </div> </div>


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

<md-radio-button ng-repeat="position in formInput.arrayOfChoices.slice(0,6)" value="{{position}}">{{position}}</md-radio-button>

Angular 1.3.6


La solución más simple sin código fue iniciar una matriz con el rango, y usar el $ index + por mucho que quiera compensar:

<select ng-init="(_Array = []).length = 5;"> <option ng-repeat="i in _Array track by $index">{{$index+5}}</option> </select>


Muy simple:

$scope.totalPages = new Array(10); <div id="pagination"> <a ng-repeat="i in totalPages track by $index"> {{$index+1}} </a> </div>


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

<div ng-repeat="n in [].constructor(10) track by $index"> {{ $index }} </div>

Muy útil cuando se maqueta.


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

Por ejemplo:

<div ng-repeat="n in [] | range:10"> do something number {{$index}} </div>

La cual, cuando uses el filtro útil de Gloopy, imprime:
hacer algo numero 0
hacer algo numero 1
hacer algo numero 2
hacer algo numero 3
hacer algo numero 4
hacer algo numero 5
hacer algo numero 6
hacer algo numero 7
hacer algo numero 8
hacer algo numero 9


Puede usar los filtros ''después'' o ''antes'' 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:

<li ng-repeat="i in list | after:4"> {{ i }} </li>

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


Saqué esto y vi que podría ser útil para algunos. (Sí, CoffeeScript. Sueñame.)

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

<div times="customer.conversations_count"> <i class="icon-picture></i> </div>

¿Puede esto ser más sencillo?

Desconfío de los filtros porque a Angular le gusta reevaluarlos sin una buena razón todo el tiempo, y es un gran cuello de botella si tienes miles de ellos como yo.

Esta directiva incluso observará los cambios en su modelo y actualizará el elemento en consecuencia.


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

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

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

o

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


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

Ver demo en JSFiddle

HTML :

<ul> <li ng-repeat="n in range(5,15)">Number {{n}}</li> </ul>

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


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

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

¡Disfrutar!


Tarde a la fiesta. Pero terminé haciendo esto:

En su controlador:

$scope.repeater = function (range) { var arr = []; for (var i = 0; i < range; i++) { arr.push(i); } return arr; }

HTML:

<select ng-model="myRange"> <option>3</option> <option>5</option> </select> <div ng-repeat="i in repeater(myRange)"></div>


Una forma breve de hacerlo sería utilizar 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. <div ng-repeat=''val in range''> {{ $index }}: {{ val }} </div>


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

<span ng-repeat="n in [3, -3] | makeRange" ng-bind="n"></span>

3 2 1 0 -1 -2 -3

<span ng-repeat="n in [-3, 3] | makeRange" ng-bind="n"></span>

-3 -2 -1 0 1 2 3

<span ng-repeat="n in [3] | makeRange" ng-bind="n"></span>

0 1 2 3

<span ng-repeat="n in [-3] | makeRange" ng-bind="n"></span>

0 -1 -2 -3


Usando UnderscoreJS:

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

Aplicando esto a $rootScope hace disponible en todas partes:

<div ng-repeat="x in range(1,10)"> {{x}} </div>


Utilizo 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

<div ng-repeat-range from="0" to="20" step="5"> Hello 4 times! </div>

o simplemente

<div ng-repeat-range from="5" to="10"> Hello 5 times! </div>

o incluso simplemente

<div ng-repeat-range to="3"> Hello 3 times! </div>

o solo

<div ng-repeat-range="7"> Hello 7 times! </div>


Establecer alcance en el controlador

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

Establecer la repetición en el archivo de plantilla HTML

<select type="text" class="form-control" name="driver_age" id="driver_age"> <option ng-repeat="age in driverAges" value="{{age}}">{{age}}</option> </select>


<div ng-init="avatars = [{id : 0}]; flag = true "> <div ng-repeat=''data in avatars'' ng-if="avatars.length < 10 || flag" ng-init="avatars.length != 10 ? avatars.push({id : $index+1}) : ''''; flag = avatars.length <= 10 ? true : false"> <img ng-src="http://actual-names.com/wp-content/uploads/2016/01/sanskrit-baby-girl-names-400x275.jpg"> </div> </div>

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