[AngularJS] ng-repeat 프로퍼티($index, $first, $middle, $last, $even, $odd)

[AngularJS] ng-repeat property($index, $first, $middle, $last, $even, $odd) 

 

 

 

 

 

 

 

 

 

 

ng-repeat 은 이름에도 나와있듯, collection 을 순환할 때 사용한다.

 

<li ng-repeat="item in myArray">
      <a ui-sref="product{{item.prdNo}}">
            <div>
                    <img ng-src="{{item.prdImgUrl}}" alt="">
            </div>
      </a>
</li>

 

 

 

위 예제와 같이 "item" 이라는 임의의 변수를 선언하여

" item. " 으로 각 순회마다 각각의 배열 요소에 접근이 가능하다. 
한 번 순환할 때마다 각각의 scope 이 생성되며, 그 순서는 $index 프로퍼티에 기록된다. 

 

 

 

 

또한 편리한 사용을 위하여 angularjs 에서는 다음과 같이 유용한 기능들을 제공한다.

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

 

 

 

1) $index (number) : 순환되고 있는 요소의 순번(index)

=> id 값에 포함시켜서 구별짓기 위해 사용되기도 하고, 특정 순번을 선택할 때도 유용하다. 

 

 

<li id="repeatEl{{$index}}" ng-repeat="item in tempList[$index].groupList">...</li>

 

 

 

 

2) $first (boolean) : 첫번째 순환일 때 true 를 반환

=> ng-init 등과 함께 사용할 때, ng-if 나, ng-hide 등 사용시 조건의 일부로도 유용하다.

 

 

 

 

 

3) $middle (boolean) : 첫번째 순환이 아니고, 마지막 순환도 아닐때 true 를 반환

=> 순환의 처음과 끝만 아니면 true!

 

 

 

 

 

4) $last (boolean) : 마지막 번 순환일때 true 를 반환

=> ng-init 등과 함께 사용할 때, 조건문의 일부로도 유용하다.

 

 

<li class="swiper-slide" ng-repeat="item in prdList" ng-init="$last && swiperFn();">...</li>

 

 

 

 

5) $even (boolean) : 순환하고 있는 순번이 짝수번째이면 true 를 반환

 

 

 

 

 

6) $odd (boolean) : 순환하고 있는 순번이 홀수번째이면 true 를 반환

 

 

 

 

 

 

 

 

 

 

 

 

간단하게 설명했지만,

ng-repeat 을 더 유용하게 사용하기 위해서는 2중 repeat 을 돌려서 사용하거나,

orderBy 로 순서를 재정렬하거나,

부모 scope 에 접근해서 데이터를 가져온다거나, 등

AngularJS 에서 제공하는 필터를 같이 사용하는 방법 등이 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

[ng-repeat 의 편리한 기능 - 반복횟수 제한 / 순서 재정렬 / 부모에게 접근]

 

[AngularJs] ng-repeat 과 limitTo / orderBy / $parent

[AngularJS] ng-repeat 과 limitTo / orderBy / $parent