C'è un modo per ng-repeatun numero definito di volte invece di dover sempre scorrere su un array?

Ad esempio, di seguito desidero che l'elemento dell'elenco venga visualizzato 5 volte assumendo $scope.numberuguale a 5 oltre ad aumentare il numero in modo che ciascun elemento dell'elenco aumenti come 1, 2, 3, 4, 5

Risultato desiderato:

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

Aggiornamento (25/09/2018)

Le versioni più recenti di AngularJS (> = 1.3.0) consentono di farlo con una sola variabile (nessuna funzione necessaria):

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

$scope.number = 5;

Questo non era possibile al momento della prima domanda. Ringraziamo @ Nikhil Nambiar dalla sua risposta di seguito per questo aggiornamento

Originale (29/05/2013)

Al momento, ng-repeataccetta solo una raccolta come parametro, ma puoi farlo:

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

E da qualche parte nel controller:

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

Ciò ti consentirebbe di modificare $scope.numberqualsiasi numero come desideri e mantenere comunque l'associazione che stai cercando.

EDIT (1/6/2014) - Le versioni più recenti di AngularJS (> = 1.1.5) richiedono track by $index:

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

Ecco un violino con un paio di liste usando la stessa getNumberfunzione.

Puoi farlo:

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

Ecco un esempio di come potresti farlo. Nota che sono stato ispirato da un commento nei documenti ng-repeat: http://jsfiddle.net/digitalzebra/wnWY6/

Nota la direttiva ng-repeat:

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

Ecco il controller:

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

Penso che questo jsFiddle da questo thread potrebbe essere quello che stai cercando.

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

Un approccio più semplice sarebbe (per un esempio di 5 volte):

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

Ho riscontrato lo stesso problema. Mi sono imbattuto in questo thread, ma non mi sono piaciuti i metodi che avevano qui. La mia soluzione stava usando underscore.js, che avevamo già installato. È semplice come questo:

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

Questo farà esattamente quello che stai cercando.

Volevo mantenere il mio HTML molto minimale, così ho definito un piccolo filtro che crea l'array [0,1,2, ...] come altri hanno fatto:

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

Successivamente, sulla vista è possibile utilizzare in questo modo:

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

Questo è davvero brutto, ma funziona senza un controller per un numero intero o una variabile:

numero intero:

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

variabile:

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

Ci sono molti modi per farlo. Ero davvero infastidito dall'avere la logica nel mio controller, quindi ho creato una semplice direttiva per risolvere il problema di ripetere un elemento n-volte.

Installazione:

La direttiva può essere installata utilizzando bower install angular-repeat-n

Esempio:

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

produce: 1234

Funziona anche usando una variabile scope:

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

Fonte:

Github

Questa è solo una leggera variazione sulla risposta accettata, ma non è necessario creare una nuova funzione. Solo per importare "Array" nell'ambito:

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

Vedi questo violino per un esempio dal vivo.

Risposta più semplice: 2 righe di codice

JS (nel controller 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>

... dov'è repeatCountil numero di ripetizioni che dovrebbero apparire in questa posizione.

angular dà una funzione molto dolce chiamata slice .. usando questo puoi ottenere quello che stai cercando. ad es. ng-repeat = "ab in abc.slice (startIndex, endIndex)"

questa demo: http://jsfiddle.net/sahilosheal/LurcV/39/ ti aiuterà e ti dirà come usare questa funzione "rendere la vita 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'}];
    }

Ecco una risposta per 1.2.x angolare

Fondamentalmente è lo stesso, con la leggera modifica di ng-repeat

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

ecco il violino: http://jsfiddle.net/cHQLH/153/

questo perché l'angolare 1.2 non consente valori duplicati nella direttiva. Questo significa che se stai provando a fare quanto segue, otterrai un errore.

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

È possibile utilizzare la ng-ifdirettiva conng-repeat

Quindi, se num è il numero di volte in cui è necessario ripetere l'elemento:

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

Puoi usare questo esempio.

Controller interno:

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

Esempio per l'elemento select sul lato del codice 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>

Per gli utenti che utilizzano CoffeeScript, è possibile utilizzare una comprensione dell'intervallo:

Direttiva

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

o controller

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

Modello

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

Espandendo un po 'la prima risposta di Ivan un po', puoi usare una stringa come raccolta senza una traccia per istruzione fintanto che i caratteri sono unici, quindi se il caso d'uso è inferiore a 10 numeri come è la domanda che farei semplicemente :

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

Che è un po 'ingenuo, certo, ma abbastanza semplice da guardare e non particolarmente confuso.

Innanzitutto, crea un filtro angolare usando LoDash:

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

La funzione tempi LoDash è in grado di gestire valori null, non definiti, 0, numeri e stringhe di numeri.

Quindi, usalo nel tuo HTML come questo:

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

o

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

Avevo bisogno di una soluzione più dinamica a questo - dove potevo incrementare la ripetizione.

HTML

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

Controllo duplicatore

<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 fornisce filtri per modificare una raccolta. In questo caso la raccolta sarebbe nulla, vale a dire [], e il filtro accetta anche argomenti, come segue:

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

Questo metodo è molto simile a quelli proposti sopra e non è necessariamente superiore ma mostra la potenza dei filtri in AngularJS.

Se n non è troppo alto, un'altra opzione potrebbe essere quella di utilizzare split ('') con una stringa di n caratteri:

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

Ho riscontrato lo stesso problema e questo è quello con cui sono uscito:

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

... e l'html:

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

ESEMPIO LIVE

Ho usato la timesfunzione di trattino basso come già in uso sul progetto, ma puoi facilmente sostituirla con un codice nativo.

Sto creando una direttiva riutilizzabile in cui il numero massimo verrà da un'altra ng-repeat. Quindi, questa è una modifica rispetto alla risposta più votata.

Basta cambiare il codice sul controller in questo -

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

Ciò restituirà un nuovo array con il numero specificato di iterazioni

poiché iterando su una stringa renderà un elemento per ogni carattere:

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

possiamo usare questa brutta soluzione ma senza codice usando il number|n decimal placesfiltro nativo.

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

in questo modo avremo mynumberelementi senza codice aggiuntivo. Say '0.000'.
Usiamo mynumber - 2per compensare 0.
Non funzionerà con numeri inferiori a 3, ma potrebbe essere utile in alcuni casi.

$scope.number = 5;

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

modo semplice:

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

nel componente / controller e quindi:

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

Questo codice proviene dal mio progetto dattiloscritto ma potrebbe essere riorganizzato in javascript puro