Existe-t-il un moyen d'effectuer ng-repeatun nombre défini de fois au lieu de toujours avoir à parcourir un tableau?

Par exemple, ci-dessous, je veux que l'élément de liste apparaisse 5 fois en supposant $scope.numberégal à 5 ​​en plus incrémentant le nombre de sorte que chaque élément de liste incrémente comme 1, 2, 3, 4, 5

Résultat désiré:

<ul>
   <li><span>1</span></li>
   <li><span>2</span></li>
   <li><span>3</span></li>
   <li><span>4</span></li>
   <li><span>5</span></li>
</ul>

Mise à jour (25/09/2018)

Les nouvelles versions d'AngularJS (> = 1.3.0) vous permettent de le faire avec seulement une variable (aucune fonction nécessaire):

<li ng-repeat="x in [].constructor(number) track by $index">
    <span>{{ $index+1 }}</span>
</li>

$scope.number = 5;

Cela n'était pas possible au moment où la question a été posée pour la première fois. Nous remercions @Nikhil Nambiar de sa réponse ci-dessous pour cette mise à jour

Original (29/05/2013)

Pour le moment, ng-repeatn'accepte qu'une collection comme paramètre, mais vous pouvez le faire:

<li ng-repeat="i in getNumber(number)">
    <span>{{ $index+1 }}</span>
</li>

Et quelque part dans votre contrôleur:

$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);   
}

Cela vous permettrait de modifier $scope.numbern'importe quel nombre à votre guise et de conserver la liaison que vous recherchez.

EDIT (1/6/2014) - Les nouvelles versions d'AngularJS (> = 1.1.5) nécessitent track by $index:

<li ng-repeat="i in getNumber(number) track by $index">
    <span>{{ $index+1 }}</span>
</li>

Voici un violon avec quelques listes utilisant la même getNumberfonction.

tu peux le faire:

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>

Voici un exemple de la façon dont vous pouvez le faire. Notez que j'ai été inspiré par un commentaire dans les documents ng-repeat: http://jsfiddle.net/digitalzebra/wnWY6/

Notez la directive ng-repeat:

<div ng-app>
    <div ng-controller="TestCtrl">
        <div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
    </div>
</div>

Voici le contrôleur:

function TestCtrl($scope) {
    $scope.range = function(n) {
        return new Array(n);
    };
};

Je pense que ce jsFiddle de ce fil pourrait être ce que vous cherchez.

<div ng-app ng-controller="Main">
   <div ng-repeat="item in items | limitTo:2">
       {{item.name}}
   </div>
</div>

Une approche plus simple serait (pour un exemple de 5 fois):

<div ng-repeat="x in [].constructor(5) track by $index">
       ...
</div>

J'ai rencontré le même problème. Je suis tombé sur ce fil, mais je n'ai pas aimé les méthodes qu'ils avaient ici. Ma solution utilisait underscore.js, que nous avions déjà installé. C'est aussi simple que ça:

<ul>
    <li ng-repeat="n in _.range(1,6)"><span>{{n}}</span></li>
</ul>

Cela fera exactement ce que vous recherchez.

Je voulais garder mon html très minimal, j'ai donc défini un petit filtre qui crée le tableau [0,1,2, ...] comme d'autres l'ont fait:

angular.module('awesomeApp')
  .filter('range', function(){
    return function(n) {
      var res = [];
      for (var i = 0; i < n; i++) {
        res.push(i);
      }
      return res;
    };
  });

Après cela, sur la vue est possible d'utiliser comme ceci:

<ul>
  <li ng-repeat="i in 5 | range">
    {{i+1}} <!-- the array will range from 0 to 4 -->
  </li>
</ul>

C'est vraiment Moche, mais cela fonctionne sans contrôleur pour un entier ou une variable:

entier:

<span ng-repeat="_ in ((_ = []) && (_.length=33) && _) track by $index">{{$index}}</span>

variable:

<span ng-repeat="_ in ((_ = []) && (_.length=myVar) && _) track by $index">{{$index}}</span>

Il y a plusieurs façons de procéder. J'étais vraiment gêné d'avoir la logique dans mon contrôleur, j'ai donc créé une directive simple pour résoudre le problème de la répétition d'un élément n fois.

Installation:

La directive peut être installée en utilisant bower install angular-repeat-n

Exemple:

<span ng-repeat-n="4">{{$index}}</span

produit: 1234

Il fonctionne également à l'aide d'une variable de portée:

<span ng-repeat-n="repeatNum"></span>

La source:

Github

Ce n'est qu'une légère variation de la réponse acceptée, mais vous n'avez pas vraiment besoin de créer une nouvelle fonction. Uniquement pour importer 'Array' dans la portée:

<div ng-app="myapp">
    <div ng-controller="ctrlParent">
        <ul>
            <li ng-repeat="i in counter(5) track by $index">
              <span>{{$index+1}}</span></li>
        </ul>
    </div>
</div>

var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
    $scope.myNumber = 5;
    $scope.counter = Array;
});

Voir ce violon pour un exemple en direct.

Réponse la plus simple: 2 lignes de code

JS (dans votre contrôleur AngularJS)

$scope.range = new Array(MAX_REPEATS); // set MAX_REPEATS to the most repetitions you will ever need in a single ng-repeat that makes use of this strategy

HTML

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

... où repeatCountest le nombre de répétitions qui devraient apparaître à cet endroit.

angulaire donne une fonction très douce appelée tranche .. en utilisant cela, vous pouvez réaliser ce que vous recherchez. par exemple ng-repeat = "ab dans abc.slice (startIndex, endIndex)"

cette démo: http://jsfiddle.net/sahilosheal/LurcV/39/ vous aidera et vous expliquera comment utiliser cette fonction "rendre la vie facile". :)

html:

<div class="div" ng-app >
    <div ng-controller="Main">
        <h2>sliced list(conditional NG-repeat)</h2>
        <ul ng-controller="ctrlParent">
            <li ng-repeat="ab in abc.slice(2,5)"><span>{{$index+1}} :: {{ab.name}} </span></li>
        </ul>
        <h2>unsliced list( no conditional NG-repeat)</h2>
         <ul ng-controller="ctrlParent">
            <li ng-repeat="ab in abc"><span>{{$index+1}} :: {{ab.name}} </span></li>
        </ul>

    </div>

CSS:

ul
{
list-style: none;
}
.div{
    padding:25px;
}
li{
    background:#d4d4d4;
    color:#052349;
}

ng-JS:

 function ctrlParent ($scope) {
    $scope.abc = [
     { "name": "What we do", url: "/Home/AboutUs" },
     { "name": "Photo Gallery", url: "/home/gallery" },
     { "name": "What we work", url: "/Home/AboutUs" },
     { "name": "Photo play", url: "/home/gallery" },
     { "name": "Where", url: "/Home/AboutUs" },
     { "name": "playground", url: "/home/gallery" },
     { "name": "What we score", url: "/Home/AboutUs" },
     { "name": "awesome", url: "/home/gallery" },
     { "name": "oscar", url: "/Home/AboutUs" },
     { "name": "american hustle", url: "/home/gallery" }
    ];
}
function Main($scope){
    $scope.items = [{sort: 1, name: 'First'}, 
                    {sort: 2, name: 'Second'}, 
                    {sort: 3, name: 'Third'}, 
                    {sort: 4, name:'Last'}];
    }

Voici une réponse pour 1.2.x angulaire

Fondamentalement, c'est la même chose, avec la légère modification de la ng-repeat

<li ng-repeat="i in getNumber(myNumber) track by $index">

voici le violon: http://jsfiddle.net/cHQLH/153/

En effet, angular 1.2 n'autorise pas les valeurs en double dans la directive. Cela signifie que si vous essayez de faire ce qui suit, vous obtiendrez une erreur.

<li ng-repeat="x in [1,1,1]"></li>

Vous pouvez utiliser la ng-ifdirective avecng-repeat

Donc, si num est le nombre de fois où l'élément doit être répété:

<li ng-repeat="item in list" ng-if="$index < num">

Vous pouvez utiliser cet exemple.

Contrôleur intérieur:

$scope.data = {
    'myVal': 33,
    'maxVal': 55,
    'indexCount': function(count) {
        var cnt = 10;
        if (typeof count === 'number') {
            cnt = count;
        }
        return new Array(cnt);
    }
};

Exemple d'élément select du côté du code HTML:

<select ng-model="data.myVal" value="{{ data.myVal }}">
    <option ng-repeat="i in data.indexCount(data.maxVal) track by $index" value="{{ $index + 1 }}">{{ $index + 1 }}</option>
</select>

Pour les utilisateurs utilisant CoffeeScript, vous pouvez utiliser une compréhension de plage:

Directif

link: (scope, element, attrs) ->
  scope.range = [1..+attrs.range]

ou contrôleur

$scope.range = [1..+$someVariable]
$scope.range = [1..5] # Or just an integer

Modèle

<div ng-repeat="i in range">[ the rest of your code ]</div>

En développant un peu la première réponse d'Ivan, vous pouvez utiliser une chaîne comme collection sans instruction track by tant que les caractères sont uniques, donc si le cas d'utilisation est inférieur à 10 chiffres, comme c'est la question que je ferais simplement :

<ul>
   <li ng-repeat="n in '12345'"><span>{{n}}</span></li>
</ul>

Ce qui est un peu jenky, bien sûr, mais assez simple à regarder et pas particulièrement déroutant.

Créez d'abord un filtre angulaire à l'aide de LoDash:

angular.module('myApp').filter('times', function(){
   return function(value){
      return _.times(value || 0);
   }
});

La fonction de temps LoDash est capable de gérer des représentations nulles, non définies, 0, des nombres et des chaînes de nombres.

Ensuite, utilisez-le dans votre HTML comme ceci:

<span ng-repeat="i in 5 | times">
 <!--DO STUFF-->
</span>

ou

<span ng-repeat="i in myVar | times">
 <!--DO STUFF-->
</span>

J'avais besoin d'une solution plus dynamique à cela - où je pourrais incrémenter la répétition.

HTML

<div ng-repeat="n in newUserCount">
<input type="text" value="" name="newuser{{n}}"/>
</div>

Contrôle du duplicateur

<span class="helper" ng-click="duplicateUser()">
Create another user with the same permissions
</span>

JS

 $scope.newUserCount = Array('1');
var primaryValue = 1;
$scope.duplicateUser = function()
{
    primaryValue++;
    $scope.newUserCount.push(primaryValue)
}

Angular fournit des filtres pour modifier une collection. Dans ce cas, la collection serait nulle, c'est-à-dire [], et le filtre prend également des arguments, comme suit:

<div id="demo">
    <ul>
        <li ng-repeat="not in []|fixedNumber:number track by $index">{{$index}}</li>
    </ul>
</div>

JS:

module.filter('fixedNumber', function() {
    return function(emptyarray, number) {
        return Array(number);
    }
});

module.controller('myCtrl', ['$scope', function($scope) {
    $scope.number = 5;
}]);

Cette méthode est très similaire à celles proposées ci-dessus et n'est pas nécessairement supérieure mais montre la puissance des filtres dans AngularJS.

Si n n'est pas trop élevé, une autre option pourrait être d'utiliser split ('') avec une chaîne de n caractères:

<div ng-controller="MainCtrl">
<div ng-repeat="a in 'abcdefgh'.split('')">{{$index}}</div>
</div>

J'ai rencontré le même problème et voici ce avec quoi je suis sorti:

(function () {
  angular
    .module('app')
    .directive('repeatTimes', repeatTimes);

  function repeatTimes ($window, $compile) {
    return { link: link };

    function link (scope, element, attrs) {
      var times    = scope.$eval(attrs.repeatTimes),
          template = element.clone().removeAttr('repeat-times');

      $window._(times).times(function (i) {
        var _scope = angular.extend(scope.$new(), { '$index': i });
        var html = $compile(template.clone())(_scope);

        html.insertBefore(element);
      });

      element.remove();
    }
  }
})();

... et le html:

<div repeat-times="4">{{ $index }}</div>

EXEMPLE EN DIRECT

J'ai utilisé la timesfonction de soulignement car nous l'utilisions déjà sur le projet, mais vous pouvez facilement la remplacer par du code natif.

Je crée une directive réutilisable où le nombre maximum proviendra d'une autre répétition ng. Il s'agit donc d'une modification de la meilleure réponse votée.

Changez simplement le code du contrôleur en ceci -

$scope.getNumber = function(num) {
    var temp = [];
    for(var j = 0; j < num; j++){
        temp.push(j)
    }
    return temp; 
}

Cela renverra un nouveau tableau avec un nombre spécifié d'itérations

puisque l'itération sur une chaîne, il rendra un élément pour chaque caractère:

<li ng-repeat = "k in 'aaaa' track by $index">
   {{$index}} //THIS DOESN'T ANSWER OP'S QUESTION. Read below.
</li>

nous pouvons utiliser cette solution de contournement laide mais sans code en utilisant le number|n decimal placesfiltre natif.

 <li ng-repeat="k in (0|number:mynumber -2 ) track by $index">
    {{$index}}
 </li>

de cette façon, nous aurons des mynumberéléments sans code supplémentaire. Dis '0.000'.
Nous utilisons mynumber - 2pour compenser 0.
Cela ne fonctionnera pas pour les nombres inférieurs à 3, mais pourrait être utile dans certains cas.

$scope.number = 5;

<div ng-repeat="n in [] | range:$scope.number">
      <span>{{$index}}</span>
</div>

manière simple:

    public defaultCompetences: Array<number> = [1, 2, 3];

dans le composant / contrôleur puis:

    <div ng-repeat="i in $ctrl.defaultCompetences track by $index">

Ce code provient de mon projet dactylographié mais pourrait être réorganisé en javascript pur