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

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

 

 

 

 

 

 

 

 

 

 

 

ng-repeat 을 더 유용하고 편리하게 사용할 수 있는 잡기술(?) 들에 대해 알아보자

(사실, 잡기술이라기보단 필수적인 요소지만)

 

 

 

 

 

 

 

 

 

 

1) limitTo : ng-repeat 의 반복 횟수를 제한한다.

 

예를 들어 어떤 list 의 요소가 몇개가 오든 상관없이 상위 20개만 보여주고 싶다면, 아래와 같이 사용 가능하다. 

너무 쉽다.

 

---

[예시]

<li ng-repeat="item in temp.PrdList | limitTo : 20">{{item.name}}</li>

---

 

=> limitTo 는 사실 angularJs 에서 제공하는 filter component 에 속하며, 추후 필터를 다룰 때 더 보기로 한다.

 

 

 

 

 

 

 

 

 

2) orderBy : ng-repeat 의 순서를 정렬한다.

 

뭔가 sql에서 봤던 것 같은 느낌이 든다. 맞다, 게보린

순환의 순서를 재정렬할 때 간단하게 사용이 가능하다.

아래 예시는 리뷰를 추천 높은순으로 재정렬 하는 것! ( '-' 주의)

 

---

[예시]

//단, reviews 안에 recmndCnt 라는 값이 있음을 전제로 한다
<li ng-repeat="item in reviews | orderBy : '-recmndCnt' ">

---

 

=> orderBy 역시 angularJs 에서 제공하는 filter component 에 속하며, 추후 필터를 다룰 때 더 보기로 한다.

 

 

 

 

 

 

 

 

 

3) $parent : 상위(부모) 요소에 접근할 때 사용한다. 

 

ng-repeat 을 2중으로 사용할 때가 있다.

예를 들어 순환하고자 하는 객체의 구조가 parent list 안에 또 다른 child list 가 있어서 

전부 순환하면서 화면을 그려줘야 한다면, 아래와 같이 사용이 가능하다.

 

 

아래의 예시에서는

 

$scope.brandSection[,...] > prdList[,...] 

 

이런식으로 $scope.brandSection(부모) 이라는 배열 속에 prdList(자식) 라는 배열이 속해있는 구조다.

 

---

[예시]

 

<div class="parent" ng-repeat="list in brandSection">
     <!-- 브랜드 명 -->
     <div class="brand_{{$index}}">
          <h3>               
               {{list.brandNm}}     
          </h3>
     </div>
    <!-- 상품명 -->
     <div class="prdList">
          <ul>
               <li class="child" ng-repeat="item in list.prdList">
                    <a ng-click="goToDetail( {{$parent.$index}} );">
                         {{item.prdNm}}
                    </a>
               </li>
          </ul>
     </div>
</div>

---

 

[해석]

 

1. brandSection 을 순환하기 위해 "list" 라는 변수를 주어 repeat 돌림

   

   => ng-repeat="list in brandSection"

 

 

 

2. brandSection 내부의 prdList 를 순환하기 위해 "item" 이라는 변수를 주어 repeat 돌림

 

   => ng-repeat="item in list.prdList" (위에서 이미 list 라고 선언해두었기 때문에 list 로 접근가능)

 

 

 

3. 클릭 시, goToDetail() 이라는 함수를 실행하는데, 파라미터로 $parent.$index, 즉,

부모인 brandSection 의 순번(index)를 보냄

 

   => ng-click="goToDetail({{$parent.$index}}, item.prdCd)"

 

 

 

이런식으로 자식의 scope 에서 부모의 scope 요소에 접근이 가능하다.

 

 

 

 

 

 

 

 

[ng-repeat 과 track by & 최초 한번만 바인딩하기(이중콜론의 사용법)]

 

[AngularJS] ng-repeat & track by / 더블콜론(이중콜론) ::

[AngularJS] ng-repeat & track by / 더블콜론(이중콜론) ::