05. 반복적인 데이터 표현을 위한 템플릿(반복 지시자)

1. 반복 지시자

1) <any ng-repeat="변수명 in 표현식">

변수명은 주어진 배열의 요소를 반복문 내부에서 참조할 때 사용된다. 

표현식은 $scope 내의 배열과 같은 순환할 대상을 가린킨다.

2) <any ng-repeat = "(key 변수명, value 변수명) in 표현식">

자바스크립트 객체같은 데이터를 순환할 때 사용한다.

key 변수명은 반복문 내부에서 객체의 key를 참조할 변수명이고 value 변수명은 참조하는 value의 변수명이다.

3) <any ng-repeat = "변수명 in 표현식 track by 표현식">

배열 요소와 생성되는 DOM 요소를 연결할 때 사용하는 고유한 값을 지정할 수 있다.

Track by를 별도로 작성하지 않으면 AngularJS는 동일하지 않은 값에 $$hashKey 속성을 추가하여 DOM 요소와 연결할 때 사용한다.

그리고 var items=[1,1]; 과 같은 동일한 값을 ng-repeat으로 표현하려고 하면 item in item track by $i

ndex로 $index에 의해 DOM 요소와 연결되게 해야한다.

Track by를 이용해 고유한 속성값을 지정하면 무의미한 DOM 렌더링을 막을 수 있다. Track by 를 지정하지 않으면 매번 다른 $$hashKey를 생성하므로 그때마다

매번 DOM을 변경하기 때문이다.

- ng-repeat을 적용한 HTML 요소는 배열 요소의 개수만큼 HTML 요소를 생성한다.

그리고 해당 HTML 요소에는 별도의 scope 영역이 생성되는데 해당 scope 영역에서만 사용할 수 있는 특별한 속성을 제공한다.

◈ 특별한 속성

$index - 배열 요소의 인덱스다. 0부터 length - 1까지의 숫자형을 반환한다.

$first - 배열 요소의 첫 번째 요소이면 값이 true아니면 false이다.

$midele - 배열 요소가 첫 번째와 마지막 요소 사이에 있으면 값이 true 아니면 false이다.

$last - 배열 요소가 배열의 마지막이면 값이 true아니면 false이다.

$even - 배열 요소의 인덱스가 짝수이면 값이 true 아니면 false이다.

$odd - 배열 요소의 인덱스가 홀수 이면 값이 true 아니면 false이다.

◈ ng-repeat을 사용했을 때 생성된 HTML 요소별 $scope

고객목록

<ul>

<li ng-repeat="customer in customerList">

[{{$inde + 1}}] 고객 이름 : {{customer.name}}, 고객 나이 : {{customer.age}}

</li>

</ul>

<화면>                                                    <브라우저 메모리>