ng-repeat항상 배열을 반복 해야하는 대신 정의 된 횟수만큼 방법이 있습니까?

예를 들어 아래에서 목록 항목을 5로 가정 $scope.number하고 숫자를 증가시키는 것으로 5 번 표시하고 각 목록 항목이 1, 2, 3, 4, 5와 같이 증가하도록하십시오.

원하는 결과 :

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

답변

업데이트 (2018 년 9 월 25 일)

최신 버전의 AngularJS (> = 1.3.0)를 사용하면 변수없이 만 기능을 수행 할 수 있습니다 (함수 필요 없음).

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

$scope.number = 5;

질문을 처음 받았을 때는 불가능했습니다. 이 업데이트에 대한 아래 답변에서 @Nikhil Nambiar의 기여

원본 (2013 년 5 월 29 일)

현재는 ng-repeat컬렉션으로 만 매개 변수를 허용하지만 다음과 같이 할 수 있습니다.

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

컨트롤러 어딘가에 :

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

이것은 당신이 변경할 수 있도록 $scope.number 원하는 바인딩을 원하는대로 하고 계속 유지할 수 있습니다.

편집 (2014 년 1/6) -최신 버전의 AngularJS (> = 1.1.5)에는 track by $index다음이 필요합니다 .

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

다음은 동일한 getNumber기능을 사용하는 몇 가지 목록 이있는 바이올린 입니다 .

답변

당신은 이것을 할 수 있습니다 :

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

답변

다음은이 작업을 수행하는 방법에 대한 예입니다. 나는 ng-repeat 문서의 의견에서 영감을 얻었습니다 : http://jsfiddle.net/digitalzebra/wnWY6/

ng-repeat 지시어에 유의하십시오.

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

컨트롤러는 다음과 같습니다.

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

답변

나는이 생각 jsFiddle를 이에서 스레드 당신이 찾고있는 무슨 수 있습니다.

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

답변

더 간단한 접근법은 다음과 같습니다 (예 : 5 배).

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

답변

나는 같은 문제에 부딪쳤다. 나는이 스레드를 보았지만 여기에있는 방법을 좋아하지 않았습니다. 내 솔루션은 이미 설치 한 underscore.js를 사용하고있었습니다. 다음과 같이 간단합니다.

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

이것은 당신이 찾고있는 것을 정확하게 할 것입니다.

답변

내 HTML을 매우 작게 유지하고 싶었으므로 다른 사람들처럼 행 [0,1,2, …]을 만드는 작은 필터를 정의했습니다.

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

그 후에보기에서 다음과 같이 사용할 수 있습니다.

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