source

AngularJs에서 ng-repeat을 X회만 반복합니다.

ittop 2023. 4. 2. 11:54
반응형

AngularJs에서 ng-repeat을 X회만 반복합니다.

Javascript와 같은 ng-repeat은 어떻게 사용하나요?

예:

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

ng-repeat을 4번 반복하고 싶은데 어떻게 해야 하나요?

각도에는 limitTo:limit 필터가 함께 제공되며 첫 번째 x개 항목과 마지막 x개 항목의 제한을 지원합니다.

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

이것이 내가 생각할 수 있는 가장 간단한 회피책입니다.

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

다음은 Plunker의 예입니다.

javascript 배열 개체에서 슬라이스 메서드를 사용할 수 있습니다.

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

쇼트 앤 스위트

를 참조해 주세요.

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

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

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

이 문제를 피하기 위해

ng-times="getTimes(4)"에 없습니다.

사용하다

달러 인덱스로 추적하다

이것처럼.

<div ng-disp="getTimes(4) 트랙의 $index">텍스트 </div>

7회 반복하려면 length=7인 배열을 사용한 다음 $index로 추적합니다.

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

b=[]빈 어레이 "b"를 만듭니다.
.length=7사이즈를 「7」으로 설정해 주세요.
&&bng-repeat에서 새로운 어레이 "b"를 사용할 수 있도록 합니다.
track by $index여기서 "$index"는 반복 위치입니다.
ng-bind="$index + 1"1부터 표시됩니다.

X회 반복하기
7을 X바꾸면 됩니다.

여기의 모든 답변은 항목이 배열이라고 가정하고 있는 것 같습니다.단, AngularJS에서는 오브젝트나 마찬가지입니다.이 경우 limitTo를 사용한 필터링도 어레이도 사용할 수 없습니다.슬라이스는 동작합니다.오브젝트 키를 분실한 경우에도 오브젝트를 어레이로 변환할 수 있습니다.이를 위한 필터의 예를 다음에 나타냅니다.

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

    };
});

어레이가 되면 슬라이스 또는 limitTo를 사용합니다(다른 답변 참조).

언급URL : https://stackoverflow.com/questions/14198017/iteration-ng-repeat-only-x-times-in-angularjs

반응형