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
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.