AngularJs에서 X 번만 반복 ng-repeat
어떻게 같은 NG 반복 사용할 수 있습니다 위한 자바 스크립트?
예:
<div ng-repeat="4">Text</div>
ng-repeat로 4 번 반복하고 싶은데 어떻게하면 되나요?
Angular는 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 예제입니다.
자바 스크립트 배열 객체에서 슬라이스 방법을 사용할 수 있습니다.
<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>
짧은 n 달콤한
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>
@mpm이 제공 한 답변이 작동하지 않아 오류가 발생합니다.
repeater에서 중복은 허용되지 않습니다. 고유 키를 지정하려면 '추적 기준'표현식을 사용하십시오. 반복기 : {0}, 중복 키 : {1}
이것을 피하려면
ng-repeat = "t in getTimes (4)"
사용하다
$ index로 추적
이렇게
<div ng-repeat = "t in getTimes (4) track by $ index"> TEXT </ div>
반복하려면 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 .
All answers here seem to assume that items is an array. However, in AngularJS, it might as well be an object. In that case, neither filtering with limitTo nor array.slice will work. As one possible solution, you can convert your object to an array, if you don't mind losing the object keys. Here is an example of a filter to do just that:
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;
}
};
});
Once it is an array, use slice or limitTo, as stated in other answers.
참고URL : https://stackoverflow.com/questions/14198017/iteration-ng-repeat-only-x-times-in-angularjs
'programing' 카테고리의 다른 글
알파벳 문자 배열 생성 (0) | 2020.09.17 |
---|---|
Xcode 프로젝트에 시뮬레이터 목록이 표시되지 않음 (0) | 2020.09.17 |
WP7 및 F #에서 비동기 POST가 실패 함 (0) | 2020.09.17 |
WebWorker는 느린 regexp 일치를 상당히 느리게 (3x) 계산합니다. (0) | 2020.09.17 |
모듈에 모의 인스턴스가있는 경우 RoboGuice 인젝터를 만드는 동안 프로세스가 충돌합니다. (0) | 2020.09.17 |