AngularJS
반복

소개

통사론

• <element ng-repeat="expression"></element>
• <div ng-repeat="(key, value) in myObj">...</div>
• <div ng-repeat="variable in expression">...</div>

매개 변수

비고

객체 속성 반복하기

<div ng-repeat="(key, value) in myObj"> ... </div>

예를 들어

<div ng-repeat="n in [42, 42, 43, 43]">
  {{n}}
</div>

추적 및 중복

ngRepeat 는 $ watchCollection 을 사용하여 컬렉션의 변경 사항을 감지합니다. 변경이 이루어 ngRepeat 는 해당 변경 사항을 DOM에 적용합니다.

• 항목이 추가되면 템플리트의 새 인스턴스가 DOM에 추가됩니다.
• 항목이 제거되면 템플리트 인스턴스가 DOM에서 제거됩니다.
• 항목이 재정렬되면 해당 템플릿이 DOM에서 재정렬됩니다.

중복

• 중복 값을 포함 할 수있는 목록을 track by .
• track by 도 목록이 크게 변화 속도가 빨라집니다.
• 이 경우에 track by 를 사용하지 않으면 오류가 발생합니다 : [ngRepeat:dupes]

$scope.numbers = ['1','1','2','3','4'];

<ul>
  <li ng-repeat="n in numbers track by $index">
    {{n}}
  </li>
</ul>

ng-repeat-start + ng-repeat-end

AngularJS 1.2 ng-repeat 는 ng-repeat-start 및 ng-repeat-end 여러 요소를 처리합니다.

// table items
$scope.tableItems = [
    {
        row1: 'Item 1: Row 1',
        row2: 'Item 1: Row 2'
    },
    {
        row1: 'Item 2: Row 1',
        row2: 'Item 2: Row 2'
    }
];

// template
<table>
    <th>
        <td>Items</td>
    </th>
    <tr ng-repeat-start="item in tableItems">
        <td ng-bind="item.row1"></td>
    </tr>
    <tr ng-repeat-end>
        <td ng-bind="item.row2"></td>
    </tr>
</table>

산출: