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> 태그로 묶어 출력합니다.
'Frontend > angularjs' 카테고리의 다른 글
ng-repeat 변경된 데이터 인식/ $apply() (0) | 2021.11.13 |
---|