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>
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」으로 설정해 주세요.
&&b
ng-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
'source' 카테고리의 다른 글
정의되지 않은 'protocol' 속성을 읽을 수 없습니다. (0) | 2023.04.02 |
---|---|
사용 불가능한 필드 집합 내에서 버튼 하나를 사용 가능으로 설정하는 방법 (0) | 2023.04.02 |
리액트 후크: 빈 배열을 인수로 사용해도 useEffect()가 두 번 호출됩니다. (0) | 2023.04.02 |
MongoDB의 트랜잭션 부족 문제를 어떻게 해결할 것인가? (0) | 2023.04.02 |
재스민 유닛 테스트에서 $q. 모든 약속을 어떻게 해결합니까? (0) | 2023.04.02 |