AngularJS For Loop avec nombres et plages

Question

Angulaire permet de fournir un soutien pour une boucle à l'aide de nombres dans son format HTML directives:

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

Mais si votre portée variable comprend une plage qui a un nombre dynamique, alors vous aurez besoin pour créer un tableau vide à chaque fois.

Dans le contrôleur

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

Dans le HTML

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

Cela fonctionne, mais il est inutile étant donné que nous ne serons pas à l'aide de la gamme de tableau dans la boucle. Personne ne sait de réglage d'une plage ou d'un régulier pour min/max de la valeur?

Quelque chose comme:

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

Answer 1

J'ai tordu cette réponse un peu et est venu avec ce violon .

Filtre défini comme:

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

Avec la répétition utilisée comme ceci:

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

Answer 2

Je suis venu avec une version encore plus simple, pour créer une plage entre deux nombres définis, par exemple. 5 à 15, le jsfiddle peut être vu ici

HTML :

 <div ng-app='myApp' ng-controller="Main">
    <li ng-repeat="n in range(5,15)">test {{n}}</li>
</div>
 

Contrôleur :

 var myApp = angular.module('myApp', []);
myApp.controller('Main', ['$scope', function ($scope) {

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

Answer 3

Je suis venu avec une syntaxe légèrement différente qui me convient un peu plus et ajoute une limite inférieure facultative également:

 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 vous pouvez utiliser comme

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

ou

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

Answer 4

Pour les nouveaux à angularjs. L'index peut être obtenu en utilisant $ index.

Par exemple:

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

Ce qui, lorsque vous utiliserez le filtre pratique de Gloopy, imprimera:
faire quelque chose numéro 0
faire quelque chose numéro 1
faire quelque chose numéro 2
faire quelque chose numéro 3
faire quelque chose numéro 4
faire quelque chose numéro 5
faire quelque chose numéro 6
faire quelque chose numéro 7
faire quelque chose numéro 8
faire quelque chose numéro 9

Answer 5

Un moyen rapide de le faire serait d'utiliser la méthode _.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>