[AngularJS] ng-repeat (사용법, 옵션)

ng-repeat="item in items | filter:search"

ng-repeat는 AngularJS에서 제공하는 디렉티브 중 하나로, 배열 또는 객체의 각 항목을 반복하여 HTML 요소를 생성하는 데 사용됩니다.

 

1. 기본 사용

//js
$scope.items = [
  { name: "apple", color: "red" },
  { name: "banana", color: "yellow" },
  { name: "orange", color: "orange" }
];

<!-- jsp -->
<ul>
  <li ng-repeat="item in items">{{item.name}} ({{item.color}})</li>
</ul>

위의 코드에서 {{item.name}}과 {{item.color}}은 객체의 name과 color 속성 값을 출력합니다. 따라서 위의 코드는 다음과 같은 결과를 생성합니다.

<ul>
  <li>apple (red)</li>
  <li>banana (yellow)</li>
  <li>orange (orange)</li>
</ul>

 

2. 옵션, 변수

1. $index, $first, $last, $middle

- $index

ng-repeat 디렉티브는 항목의 순서와 인덱스를 추적하기 위해 $index라는 변수를 제공합니다. 이 변수를 사용하면 현재 항목의 인덱스를 가져올 수 있습니다.

<ul>
  <li ng-repeat="item in items">{{$index}}. {{item}}</li>
</ul>

- $first, $last, $middle

현재 항목이 첫 번째인지, 마지막인지, 중간에 있는지 등을 확인하는 데 유용합니다.

<ul>
  <li ng-repeat="item in items" ng-class="{first: $first, last: $last}">{{item}}</li>
</ul>

<!-- 결과 -->
<ul>
  <li class="first">apple</li>
  <li>banana</li>
  <li class="last">orange</li>
</ul>

 

2. orderBy, limitTo, filter

- orderBy 

ng-repeat 디렉티브와 함께 사용하여 배열 요소를 지정된 기준에 따라 정렬합니다. orderBy 절에는 정렬 기준으로 사용할 속성 이름이나 함수를 지정할 수 있습니다. 

ng-repeat="item in items | orderBy:'name'"

items 배열이 name 속성을 기준으로 오름차순으로 정렬됩니다. orderBy는 다중 속성 정렬도 지원합니다.

 

- limitTo

ng-repeat 디렉티브와 함께 사용하여 배열에서 일부 요소만 보여줍니다. limitTo 절에는 보여줄 요소의 개수를 지정할 수 있습니다.

ng-repeat="item in items | limitTo:5"

items 배열에서 5개의 요소만 보여집니다.

 

- filter

ng-repeat 디렉티브와 함께 사용하여 배열에서 원하는 요소만 보여줍니다. filter 절에는 원하는 요소를 찾는데 사용할 함수나 표현식을 지정할 수 있습니다. 

예를 들어, 

ng-repeat="item in items | filter:search"

items 배열에서 search 변수에 매칭되는 요소만 보여집니다.

*search(Stirng)를 포함 하는 것 만 보이도록 필터링.

 

item이 객체인 경우 아래와 같이 name 속성에 대해서만 filter을 적용할 수 있습니다.

ng-repeat="item in items | filter:{name: search}"

 

3. track by

tng-repeat 디렉티브를 사용하여 배열 요소를 반복할 때, 각 요소를 구분하기 위해 사용하는 기능입니다. 

기본적으로 AngularJS는 ng-repeat를 사용하여 반복된 배열의 요소를 구별하기 위해 요소의 인덱스 값을 사용합니다. 이는 일반적으로 잘 작동하지만, 만약 배열 요소의 순서가 변경되거나 요소가 추가되거나 삭제되면 인덱스 값이 변경되므로 불필요한 DOM 조작이 발생할 수 있습니다. 

 

track by를 사용하면 AngularJS는 각 요소의 고유한 식별자를 추적하므로 배열 요소가 변경되었을 때, 불필요한 DOM 조작을 방지할 수 있습니다.

ng-repeat="item in items track by item.id"

 items 배열의 각 요소의 id 속성을 사용하여 요소를 구별합니다. 

track by는 성능 향상을 위해 반드시 사용해야 하는 것은 아니지만, 대규모 데이터를 처리하는 경우, track by를 사용하면 불필요한 DOM 조작을 방지하여 애플리케이션의 성능을 향상시킬 수 있습니다.

 

4. ng-repeat-start, ng-repeat-end

ng-repeat-start와 ng-repeat-end 디렉티브를 사용하여 여러 요소를 반복하고 ng-repeat 범위를 나타냅니다. 이를 통해 여러 요소를 반복하면서 복잡한 마크업을 생성할 수 있습니다.

 

<div ng-repeat-start="item in items">
  <p>{{item}}</p>
</div>
<div ng-repeat-end></div>

반복문의 시작과 끝을 지정합니다. 이를 이용하여 각 항목을 <p> 태그로 묶어 출력합니다.