web-dev-qa-db-fra.com

Manière de répéter le nombre défini de fois au lieu de répéter sur un tableau?

Existe-t-il un moyen de ng-répéter un nombre défini de fois au lieu d'avoir toujours à itérer sur un tableau?

Par exemple, ci-dessous, je souhaite que l'élément de liste apparaisse 5 fois en supposant que $scope.number soit égal à 5 ​​et incrémente le nombre. Ainsi, chaque élément de liste s'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>
angularjsangularjs-ng-repeatng-repeat
411
Malcr001

Pour le moment, ng-repeat accepte uniquement une collection en tant que paramètre, mais vous pouvez le faire:

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

Et quelque part dans votre contrôleur:

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

Cela vous permettrait de remplacer $scope.number par n’importe quel nombre et de maintenir la reliure que vous recherchez.

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

EDIT 1/6/2014 : Les versions les plus récentes de Angular 1.x utilisent la syntaxe suivante:

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

EDIT le 25/09/2018 : les versions les plus récentes de Angular 1.x vous permettent de le faire sans fonction. Si votre code est simple et que vous n'avez pas besoin d'une fonction getNumber pour d'autres raisons, vous pouvez maintenant l'omettre et procéder comme suit:

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

Merci à @Nikhil Nambiar de sa réponse ci-dessous pour cette mise à jour.

556
Dan

tu peux le faire:

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

Voici un exemple de la façon dont vous pourriez faire cela. Notez que j'ai été inspiré par un commentaire dans la documentation 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);
    };
};
94
Polaris878

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>
82
jeffmayeur

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

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

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és. C'est aussi simple que cela:

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

Cela fera exactement ce que vous recherchez.

50
Mark Roach

Je voulais garder mon code html très minimal, 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>
48
miguelr

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>
33
M J

Il y a plusieurs façons de le faire. J'étais vraiment dérangé par 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 avec bower install angular-repeat-n

Exemple: 

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

produit: 1234

Cela fonctionne aussi en utilisant une variable de portée:

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

Source:

Github

16
connorbode

Il ne s'agit que d'une légère variation de la réponse acceptée, mais vous n'avez pas vraiment besoin de créer une nouvelle fonction . Seulement importer 'Array' dans le scope:

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

13
Sylvain Leroux

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ù repeatCount est le nombre de répétitions devant apparaître à cet endroit.

9
JellicleCat

angular donne une fonction très douce appelée slice .. en utilisant cela, vous pouvez obtenir ce que vous cherchez. par ex. 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'}];
    }
8
sheelpriy

Vous pouvez utiliser la directive ng-if avec ng-repeat

Donc, si num est le nombre de fois où vous avez besoin de répéter l'élément:

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

Voici une réponse pour angular 1.2.x

En gros, il en va de même, 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>
6
DrogoNevets

En développant un peu la première réponse d'Ivan, vous pouvez utiliser une chaîne comme collection sans instruction piste par déclaration tant que les caractères sont uniques. Par conséquent, si le cas d'utilisation contient moins de 10 chiffres, comme je le ferais simplement pour la question :

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

3
omikes

Vous pouvez utiliser cet exemple.

Contrôleur interne:

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

Exemple pour l'élément select côté 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>
3
elceka

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

Directive

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>
3
Roi

Commencez par créer un filtre angular à l'aide de LoDash:

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

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

Ensuite, utilisez-le dans votre code HTML comme ceci:

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

ou

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

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>
1
vonwolf

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

(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 fonction times du trait de soulignement, car nous l'utilisions déjà dans le projet, mais vous pouvez facilement le remplacer par du code natif.

1
nicooga

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.

1
Nik Dow

J'avais besoin d'une solution plus dynamique pour 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)
}
1
adswebwork

itérant sur une chaîne, il restituera 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 moche mais sans code en utilisant le filtre natif number|n decimal places.

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

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

0
Ivan Ferrer Villa
$scope.number = 5;

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

Je crée une directive réutilisable où le nombre maximum proviendra d'une autre répétition ng. Donc, ceci est une édition sur la meilleure réponse votée.

Il suffit de changer 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 retournera un nouveau tableau avec le nombre spécifié d'itérations

0
sagars01