AngularJS For Loop avec nombres et plages

Angular prend en charge une boucle for en utilisant des nombres dans ses directives HTML:

do something

Mais si votre variable de scope inclut une plage dont le numéro est dynamic, vous devrez 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

 
do something

Cela fonctionne, mais ce n’est pas nécessaire car nous n’utiliserons pas le tableau de distance dans la boucle. Est-ce que quelqu’un sait comment définir une plage ou une valeur normale pour la valeur min / max?

Quelque chose comme:

 
do something

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 

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

 
do something

Je suis venu avec une version encore plus simple, pour créer une plage entre deux nombres définis, par exemple. 5 à 15

Voir la démo sur JSFiddle

HTML :

 
  • Number {{n}}

Contrôleur :

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

Rien que du javascript (vous n’avez même pas besoin d’un contrôleur):

 
{{ $index }}

Très utile lors de la maquette

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

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

ou

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

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

Par exemple:

 
do something number {{$index}}

Lequel, 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

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

J’utilise ma directive ng-repeat-range :

 /** * Ng-Repeat implementation working with number ranges. * * @author Umed Khudoiberdiev */ angular.module('commonsMain').directive('ngRepeatRange', ['$comstack', function ($comstack) { 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); } }; }]); 

et le code html est

 
Hello 4 times!

ou simplement

 
Hello 5 times!

ou même simplement

 
Hello 3 times!

ou juste

 
Hello 7 times!

Plus simple aucune solution de code ne consistait à lancer un tableau avec la plage et à utiliser le $ index + que je souhaite compenser par:

  

Vous pouvez utiliser les filtres “after” ou “before” dans le module angular.filter ( https://github.com/a8m/angular-filter )

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

HTML:

 
  • {{ i }}
  • résultat: 5, 6, 7, 8, 9, 10

    Définition de la méthode

    Le code ci-dessous définit une range() méthodes range() disponible pour toute l’étendue de votre application MyApp . Son comportement est très similaire à la méthode 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 

    Usage

    Avec un paramètre:

     {{ i }},  

    0, 1, 2,

    Avec deux parameters:

     {{ i }},  

    1, 2, 3, 4,

    Avec trois parameters:

     {{ i }},  

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

    Réponse la plus courte: 2 lignes de code

    JS (dans votre contrôleur AngularJS)

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

    HTML

     

    … où myCount est le nombre d’écanvass qui doivent apparaître à cet emplacement.

    Vous pouvez utiliser $index pour toutes les opérations de suivi. Par exemple, si vous souhaitez imprimer une mutation sur l’index, vous pouvez mettre les éléments suivants dans le div :

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

    Sans aucun changement dans votre contrôleur, vous pouvez utiliser ceci:

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

    Prendre plaisir!

    Utiliser UnderscoreJS:

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

    En l’appliquant à $rootScope il est disponible partout:

     
    {{x}}

    Très simple:

     $scope.totalPages = new Array(10);  

    Définir Scope dans le contrôleur

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

    Set Repeat in Html Template File

      

    Une amélioration de la solution 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; }; }); 

    usage

      

    3 2 1 0 -1 -2 -3

      

    -3 -2 -1 0 1 2 3

      

    0 1 2 3

      

    0 -1 -2 -3

    J’ai essayé ce qui suit et cela a fonctionné très bien pour moi:

     {{position}} 

    Angulaire 1.3.6

    C’est la réponse améliorée de jzm (je ne peux pas commenter autrement je commenterais sa réponse car il y a des erreurs). La fonction a une valeur de plage de début / fin, elle est donc plus flexible et … ça marche. Ce cas particulier concerne le jour du mois:

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

    Salut, vous pouvez atteindre cet objective en utilisant HTML pur en utilisant AngularJS (NO Directive est nécessaire!)

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

    J’ai fouetté ça et j’ai vu que cela pourrait être utile pour certains. (Oui, CoffeeScript. Sue-moi.)

    Directif

     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) 

    Utiliser:

    HTML

     

    En retard à la fête. Mais j’ai fini par faire ça:

    Dans votre contrôleur:

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

    Html:

      
     

    Si vous voulez réaliser cela en HTML sans contrôleur ni usine.

    C’est la variante la plus simple: il suffit d’utiliser un tableau d’entiers ….

      
  • test {{n}}