Czy jest na to sposób ng-repeat określoną liczbę razy zamiast konieczności iteracji po tablicy?

Na przykład poniżej chcę, aby element listy pojawił się 5 razy, przy założeniu, że jest $scope.numberrówny 5 dodatkowo zwiększając liczbę, więc każdy element listy zwiększa się o 1, 2, 3, 4, 5

Pożądany rezultat:

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

Aktualizacja (25.09.2018)

Nowsze wersje AngularJS (> = 1.3.0) pozwalają to zrobić tylko ze zmienną (żadna funkcja nie jest wymagana):

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

$scope.number = 5;

Nie było to możliwe w momencie pierwszego pytania. Podziękowania dla @Nikhil Nambiar z jego odpowiedzi poniżej dla tej aktualizacji

Oryginał (29.05.2013)

W tej chwili ng-repeatakceptuje tylko kolekcję jako parametr, ale możesz to zrobić:

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

I gdzieś w twoim kontrolerze:

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

Pozwoliłoby to na zmianę $scope.numberdowolnej liczby i utrzymanie wiązania, którego szukasz.

EDYCJA (1/6/2014) - Nowsze wersje AngularJS (> = 1.1.5) wymagają track by $index:

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

Oto skrzypce z kilkoma listami używającymi tej samej getNumberfunkcji.

możesz to zrobić:

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

Oto przykład, jak możesz to zrobić. Zauważ, że zainspirował mnie komentarz w dokumentacji powtórzeń ng: http://jsfiddle.net/digitalzebra/wnWY6/

Zwróć uwagę na dyrektywę ng-repeat:

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

Oto kontroler:

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

Myślę, że ten jsFiddle z tego wątku może być tym, czego szukasz.

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

Prostsze podejście byłoby (na przykład 5 razy):

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

Natrafiłem na ten sam problem. Natknąłem się na ten wątek, ale nie podobały mi się metody, które tu zastosowali. Moje rozwiązanie wykorzystywało underscore.js, które już zainstalowaliśmy. To takie proste:

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

To zrobi dokładnie to, czego szukasz.

Chciałem, aby mój html był bardzo minimalny, dlatego zdefiniowałem mały filtr, który tworzy tablicę [0,1,2, ...] tak jak zrobili to inni:

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

Następnie w widoku można używać w następujący sposób:

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

To jest naprawdę Brzydkie, ale działa bez kontrolera dla liczby całkowitej lub zmiennej:

liczba całkowita:

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

zmienna:

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

Istnieje wiele sposobów, aby to zrobić. Naprawdę martwiłem się logiką w moim kontrolerze, dlatego stworzyłem prostą dyrektywę, aby rozwiązać problem powtarzania elementu n-razy.

Instalacja:

Dyrektywę można zainstalować za pomocą bower install angular-repeat-n

Przykład:

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

produkuje: 1234

Działa również przy użyciu zmiennej scope:

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

Źródło:

Github

To tylko niewielka odmiana zaakceptowanej odpowiedzi, ale tak naprawdę nie trzeba tworzyć nowej funkcji. Aby zaimportować „Array” w zakresie:

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

Zobacz to skrzypce, aby zobaczyć przykład na żywo.

Najłatwiejsza odpowiedź: 2 linie kodu

JS (w twoim kontrolerze 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>

... gdzie repeatCountjest liczba powtórzeń, które powinny pojawić się w tej lokalizacji.

kątowy daje bardzo słodką funkcję zwaną plasterkiem . Dzięki temu możesz osiągnąć to, czego szukasz. np. ng-repeat = "ab in abc.slice (startIndex, endIndex)"

to demo: http://jsfiddle.net/sahilosheal/LurcV/39/ pomoże ci powiedzieć, jak korzystać z tej funkcji „ułatwiającej życie”. :)

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

Oto odpowiedź na pytanie kątowe 1.2.x

Zasadniczo jest to to samo, z niewielką modyfikacją ng-repeat

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

oto skrzypce: http://jsfiddle.net/cHQLH/153/

Wynika to z faktu, że kątowy 1.2 nie zezwala na powielanie wartości w dyrektywie. Oznacza to, że jeśli próbujesz wykonać następujące czynności, pojawi się błąd.

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

Możesz użyć ng-ifdyrektywy zng-repeat

Jeśli więc liczba jest liczbą powtórzeń elementu:

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

Możesz użyć tego przykładu.

Wewnątrz kontrolera:

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

Przykład dla elementu select po stronie kodu 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>

Użytkownicy korzystający z CoffeeScript mogą korzystać ze zrozumienia zakresu:

Dyrektywa

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

lub kontroler

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

Szablon

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

Rozwijając nieco pierwszą odpowiedź Ivana, możesz użyć łańcucha jako kolekcji bez ścieżki według instrukcji, pod warunkiem, że znaki są unikalne, więc jeśli przypadek użycia jest mniejszy niż 10 liczb, to jest pytanie, które po prostu zrobiłbym :

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

Co jest nieco zakłopotane, jasne, ale wystarczająco proste, aby na nie patrzeć i niezbyt mylące.

Najpierw utwórz filtr kątowy za pomocą LoDash:

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

Funkcja czasów LoDash jest w stanie obsłużyć null, niezdefiniowane, 0, liczby i ciąg znaków reprezentujący liczby.

Następnie użyj go w swoim HTML jako:

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

lub

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

Potrzebowałem bardziej dynamicznego rozwiązania tego problemu - w którym mógłbym zwiększyć liczbę powtórzeń.

HTML

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

Kontrola powielacza

<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 zapewnia filtry do modyfikowania kolekcji. W takim przypadku kolekcja byłaby pusta, tj. [], A filtr przyjmuje również następujące argumenty:

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

Ta metoda jest bardzo podobna do tych zaproponowanych powyżej i niekoniecznie jest lepsza, ale pokazuje moc filtrów w AngularJS.

Jeśli n nie jest zbyt wysokie, inną opcją może być użycie split ('') z ciągiem n znaków:

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

Zetknąłem się z tym samym problemem i właśnie z tego wyszło:

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

... i HTML:

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

PRZYKŁAD NA ŻYWO

Użyłem timesfunkcji podkreślenia, ponieważ używaliśmy jej już w projekcie, ale można ją łatwo zastąpić rodzimym kodem.

Tworzę dyrektywę wielokrotnego użytku, w której maksymalna liczba będzie pochodzić z innego powtórzenia ng. To jest edycja najlepszej odpowiedzi.

Po prostu zmień kod na kontrolerze na to -

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

Zwróci to nową tablicę z określoną liczbą iteracji

ponieważ iteracja po ciągu spowoduje wyświetlenie elementu dla każdego znaku:

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

możemy użyć tego brzydkiego, ale bez kodu obejścia, używając number|n decimal placesfiltru natywnego.

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

w ten sposób będziemy mieć mynumberelementy bez dodatkowego kodu. Powiedzmy '0.000'.
Używamy mynumber - 2do kompensacji. 0.
To nie działa dla liczb poniżej 3, ale może być przydatne w niektórych przypadkach.

$scope.number = 5;

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

prosta droga:

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

w komponencie / kontrolerze, a następnie:

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

Ten kod pochodzi z mojego projektu maszynopisu, ale można go przestawić na czysty JavaScript