■ 참고
[AngularJS] ng-repeat 사용법 정리
[Angular.js] 앵귤러JS – ng-repeat에 있는 track by에 대한 설명
■ AngularJS에서 반복되는 항목을 표시할때 ng-repeat 디렉티브를 사용한다. ng-repeat내의 속성에는 다음과 같다
$index – {number}, 현재 반복 요소의 오프셋(0부터 length-1까지)
$first – {boolean}, 현재 반복 요소가 첫번째 요소이면 true
$middle – {boolean}, 현재 반복 요소가 처음과 끝이 아니면 true
$last – {boolean}, 현재 반복 요소가 마지막 요소이면 true
■ ng-repeat 사용법 1
<!DOCTYPE html>
<html ng-app="myApp">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<head>
<title></title>
<script src="/js/angularjs/1.5.6/angular.js"></script>
<script src='/js/jquery/jquery-1.11.0.min.js'></script>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myAppCtrl", function($scope){
$scope.list = [
{id:"1",name:"김유신"},
{id:"2",name:"강감찬"},
{id:"3",name:"박찬호"}
];
});
</script>
</head>
<body ng-controller="myAppCtrl">
<h1>
AngularJS ng-repeat 사용예 1<br/>
<font color="red">
</font>
</h1>
<hr/>
<table border="1">
<tr>
<td>Id</td>
<td>Name</td>
<td>Index</td>
<td>First</td>
<td>Last</td>
<td>Middle</td>
</tr>
<tr data-ng-repeat="row in list">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{$index}}</td>
<td>{{$first}}</td>
<td>{{$middle}}</td>
<td>{{$last}}</td>
</tr>
</table>
</body>
</html>
angularjs ng-repeat 사용법1
■ ng-repeat 사용법 2 – View내에서 데이터 등록 후 반복문 작성
<tr data-ng-repeat="row in [
{id:'11',name:'최유신'},
{id:'22',name:'장감찬'},
{id:'33',name:'손찬호'}
]">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{$index}}</td>
<td>{{$first}}</td>
<td>{{$middle}}</td>
<td>{{$last}}</td>
</tr>
angularjs ng-repeat 사용법2
■ ng-repeat 사용법 3 – track by 추가
javascript 배열은 중복된 값을 허용한다. 다만 ng-repeat에서 track by 키워드가 추가되면 중복된 인자가 있을 경우에 아래와 같이 [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use ‘track by’ expression to specify unique keys. 에러 메세지가 출력된다. 해결 방법은 중복된 값을 제거하거나 track by 키워드를 제거(중복허용)한다. 즉, 중복된 id값(1)의 중복을 제거하거나 track by 키워드를 제거하면 Duplicate 에러메세지는 사라진다.
<tr data-ng-repeat="row in [
{id:'1',name:'최유신'},
{id:'1',name:'장감찬'},
{id:'3',name:'손찬호'}
] track by row.id">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{$index}}</td>
<td>{{$first}}</td>
<td>{{$middle}}</td>
<td>{{$last}}</td>
</tr>
angularjs ng-repeat track by
- AngularJS angular.copy 사용법, angular 복사 2019년 5월 17일
- AngularJS fromJson, toJson 사용법 2019년 5월 15일
- AngularJS에서 ng-style사용시 조건문 이용방법 2019년 4월 25일
- AngularJS에서 ng-style사용시 함수 이용방법 2019년 4월 23일
- AngularJS 동적 HTML, Function 추가 2019년 4월 15일
- AngularJS에서 팝업창 띄우기 2019년 4월 2일
- AngularJS 하나의 모듈에 factory 다중 등록 2018년 2월 26일
- AngularJS factory 예제 2018년 2월 26일
- AngularJS forEach ng-repeat 예제 2018년 2월 19일
- AngularJS $http, spring TEXT response 예제 2018년 1월 17일
- AngularJS selectbox 간단한 예제 2018년 1월 15일
- AnuglarJS forEach 예제 2018년 1월 12일
- AngularJS checkbox 제어 및 활성/비활성(ng-disabled) 예제 2018년 1월 8일
- AngularJS button 활성/비활성(ng-disabled) 예제 2018년 1월 8일
- AngularJS radio 활성/비활성(ng-disabled) 예제 2018년 1월 8일
- AngularJS $broadcast, $emit, $on 예제 2018년 1월 3일
- AngularJS – $watch $digest $apply Life Cycle 2017년 12월 26일
- AngularJS $watchCollection 2017년 12월 26일
- AngularJS $watchGroup 2017년 12월 26일
- AngularJS $watch 2017년 12월 26일
- AngularJS 반복문 ng-repeat 2017년 7월 22일
- AngularJS $timeout 2017년 7월 22일
- AngularJS Show/Hide, 보이기/숨기기 2017년 7월 16일
- AngularJS 라디오 버튼 제어 2017년 7월 16일
- AngularJS시작하기, Hello AngularJS 2017년 7월 15일