AngularJs에서 X 번만 반복 ng-repeat


87

Javascript에서 for 와 같이 ng-repeat를 어떻게 사용할 수 있습니까?

예:

<div ng-repeat="4">Text</div>

ng-repeat로 4 번 반복하고 싶은데 어떻게하면 되나요?


3
둘 다 가능합니다 : 지시문에는 ngBind와 같은 낙타 케이스 이름이 있습니다. 이 지시문은 특수 문자 :,-또는 _를 사용하여 낙타 케이스 이름을 스네이크 케이스로 변환하여 호출 할 수 있습니다. 선택적으로 지시문 앞에 x- 또는 data-를 붙여 HTML 유효성 검사기를 준수 할 수 있습니다.
asgoth

2
와우 왜 그렇게 많은 오답이 왔는지, ng-repeat = "item in items | limitTo : 4"를 사용해야합니다.
Toolkit

반복 할 배열이 없을 가능성이 있습니다. 별표 평점에 별을 표시하려면 다음과 같이 말합니다. 표시해야하는 별의 수에 대한 필드가있을 수 있지만 반복 할 수는 없습니다.
nirazul 2015

@Toolkit ... 그리고 items..?
TJ

답변:


343

Angular는 limitTo : limit 필터와 함께 제공되며 첫 x 항목과 마지막 x 항목 제한을 지원합니다.

<div ng-repeat="item in items|limitTo:4">{{item}}</div>

14
이것은 배열의 객체에 대한 반복 작업에서도 작동하므로 답이되어야합니다. 또한 Angular 기능도 있습니다.
Ashley Coolman 2014 년

29
이것은 매우 유용한 코드 조각이지만 실제로 OP의 질문을 만족 시키지는 않습니다. 그는 단순히 n 번 반복하는 방법을 찾고 있으며 반복 할 실제 객체가 없을 가능성이 높습니다.
SamHuckaby

2
이것이 답이어야합니다. AngularJS 코어에서 제공하는 도구를 사용합니다
Udo

10
이것은 실제로 문제를 해결하지 않습니다. 당신은 그가 명명 된 개체를 가지고 있다고 가정합니다items
Batman

1
실제로 질문에 대한 유용한 답변은 아니지만 (X를 제한하지 않고 X 번 반복하는 방법을 구체적으로 검색했습니다) 그럼에도 불구하고 유용한 코드 조각.
MacK

66

이것은 내가 생각할 수있는 가장 간단한 해결 방법입니다.

<span ng-repeat="n in [].constructor(5) track by $index">
{{$index}}
</span>

다음은 Plunker 예제입니다.


2
주위에 앉아있는 컨트롤러에서 기능을 사용하지 않고 영리하고 매우 유용합니다. 이 각도 기능이없는 이유를 아직 당황

1
이것이 이되어야합니다 . OP는 "다음과 같은 ng-repeat 사용"을 요청했습니다. 이는 컨트롤러의 "지원"없이 모든 구현을 뷰에 직접 포함하는 것을 의미합니다. 이 솔루션은 정확히 그 기능을 수행하며 부팅하기에 매우 영리합니다.
karfus

좋지만 모든 각도 버전에서 작동하지 않습니다. 1.2.9를 사용하고 있는데 지원되지 않습니다 :Error: [$parse:isecfld]
Emaborsa

50

자바 스크립트 배열 객체에서 슬라이스 방법을 사용할 수 있습니다.

<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>

짧은 n 달콤한


2
왜 잘못 되었나요?. 효과가있다. 배열 인덱스에서 2-4 개의 배열 요소를 원하는 경우 다른 시나리오를 살펴 보겠습니다. limitTo 필터와 함께 작동합니까?
Gihan

4
그것은하지 잘못된 쉬운만큼 그 단지 밤은의item in items|limitTo:4
CENT1PEDE

1
이것은 항목 1-4를 표시 할 수있는 기능을 추가 한 다음 버튼을 클릭하여 .slice (0,4)를 .slice (5,8)로 변경하여 간단한 페이지 매김을 허용합니다. 감사!
BaneStar007

39

html에서 :

<div ng-repeat="t in getTimes(4)">text</div>

그리고 컨트롤러에서 :

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

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

편집하다 :

angularjs> 1.2.x

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>

19
다른 옵션 : t in [1,2,3,4]t in 'aaaa' 등 :
Valentyn Shybanov

4
Angular가 그것을 뒷받침하는 함수없이 수학적 루프를 지원할 수 없다는 것이 이상하게 보입니다.
Guido Anselmi 2014 년

4
그래 내가처럼 쓰고, 30 배를 반복하는 것을 상상할 수 [1,2,3,4]... 무엇 실력 솔루션이 하나
마테이

2
더 나은 솔루션은 DavidLin의 아래 답변을 참조하십시오.
SamHuckaby 2014 년

@SamHuckaby 문제는 범위를 반복하는 것입니다. 예를 들어 기존 배열의 한 조각에 대해 4 번이 아니라 4 번만 반복하는 것이 아니라, 자체적으로 의미하는 값 집합을 반복하는 것이 아닙니다. "[0..4]"와 같은 임시 슬라이스를 만들 때 coffeescript에서와 같이 실제 값에는 신경 쓰지 않고 작업을 4 번 반복하면됩니다.
mpm

13

@mpm이 제공 한 답변이 작동하지 않아 오류가 발생합니다.

repeater에서 중복은 허용되지 않습니다. 고유 키를 지정하려면 '추적 기준'표현식을 사용하십시오. 반복기 : {0}, 중복 키 : {1}

이것을 피하려면

ng-repeat = "t in getTimes (4)"

사용하다

$ index로 추적

이렇게

<div ng-repeat = "t in getTimes (4) track by $ index"> TEXT </ div>


내 기술은 내가 사용한 angularjs 버전에서 작동했습니다. plunkr를 확인하면 최대한 빨리 업데이트하겠습니다.
mpm

10

반복하려면 7 번으로 배열을 사용하려고 길이 = 7 다음, 추적하여 $ 인덱스 :

<span ng-repeat="a in (((b=[]).length=7)&&b) track by $index" ng-bind="$index + 1 + ', '"></span>

b=[]빈 배열«b»를 만들고
.length=7크기를«7»로 설정
&&b하고 새 배열«b»를 ng-repeat에 사용할 수 있도록합니다.
track by $index여기서 «$ index» 는 반복 위치입니다.
ng-bind="$index + 1"1부터 시작합니다.

반복합니다 X의 시간 :
단지 대체 (7) 에 의해 X .


이 답변이 제공하는 것이 무엇인지에 대해 명확하지 않지만 수락 된 답변 또는 두 개의 더 높은 표의 답변에 아직 포함되지 않았습니다.
JamesT 2015

Angular가 얼마나 강력한 지 그 이상은 없습니다.
funnyniko 2015

3
두 개의 더 높은 투표 응답은«items»가 배열이라고 가정하는 것 같습니다. 이것은 배열을 제자리에 만듭니다.
funnyniko

잘하셨습니다. 이것은 실제로 OP의 질문을 해결하는 유일한 솔루션입니다. 표가 몇 개 밖에 없다는 것이 놀랍습니다. 더 우아한 솔루션이 있는지 궁금합니다.
Healforgreen

3

여기의 모든 답변은 항목 이 배열 이라고 가정하는 것 같습니다 . 그러나 AngularJS에서는 객체가 될 수도 있습니다. 이 경우 limitTo 또는 array.slice를 사용한 필터링은 작동하지 않습니다. 가능한 한 가지 해결책으로 객체 키를 잃어 버려도 괜찮다면 객체를 배열로 변환 할 수 있습니다. 다음은이를 수행하는 필터의 예입니다.

myFilter.filter('obj2arr', function() {
    return function(obj) {
        if (typeof obj === 'object') {
            var arr = [], i = 0, key;
            for( key in obj ) {
                arr[i] = obj[key];
                i++;
            }
            return arr;
        }
        else {
            return obj;
        }

    };
});

배열이면 다른 답변에 명시된 것처럼 slice 또는 limitTo를 사용하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.