angularjs에서 가장 많이 사용되는 디렉티브 중 하나가 바로 ng-repeat라고 할 수 있습니다. 워낙 많이 사용되기 때문에 반드시 알아야 하는 필수 디렉티브로 아래는 ng-repeat의 쓰임과 활용에 대하여 상세히 알아보려합니다.

! ng-repeat의 역할ng-repeat는 연속된 여러개의 값을 가진 데이터 값을 사용하여 하나의 리스트 또는 목록으로 반환하고 보여주는 기능을 가지고 있습니다. ng-repeat는 for()문 또는 제이쿼리의 $forEach()와 비슷한 동작을 구현합니다. 그럼 아래는 예제코드입니다.


예를 들어 fruit이라는 변수가 있고 이를 ng-repeat를 사용하여 연속된 과일을 목록으로 만들어 보여주려면 아래와 같이 사용할 수 있습니다.

1 - banana : 100원
2 - mango : 300원
3 - grape : 500원
위 내용은 출력 될 모습으로 상세 코드는 아래와 같습니다.

<ul ng-app="app" ng-controller="AppCtrl">
  <li ng-repeat="item in fruits">{{ $index + 1 }} - {{ item.name }} : {{ item.price }}</li>
</ul>

아래는 스크립트가 사용된 코드입니다.

<script type="text/javascript">
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope) {
  $scope.fruits = [
    {
       name: 'banana',
       price: '100원'
    },
    {
      name: 'mango',
      price: '300원'
    },
    {
      name: 'grape', 
      price: '500원'
    }
  ];
});
</script>

위 예제에서는 app이라는 모듈을 선언하고 fruits라는 배열안에 몇개의 과일에 대한 정보를 입력 후 ng-repeat를 사용하여 출력하였습니다.

예제 안에는 $index라는 내장변수를 사용하였습니다. $index는 해당하는 값의 순서를 0부터 차례대로 반환합니다. 위에서 $index +1을 사용하였으므로 맨 처음 나타나는 값은 1이 됩니다.


# ng-repeat 내장변수 알아보기
먼저 6개 내장변수는 다음과 같습니다. 아래 값들 중에서 $index만 숫자 타입으로 해당값을 반환하며 나머지는 모두 불리언(boolean) 타입으로 반환합니다.

$index [string]
// 반복되는 값의 순서를 0부터 숫자로 반환

$first [boolean]
// 첫번째 순서에 해당하는 경우 true를 반환

$middle [boolean]
// 중간에 해당하는 경우 true를 반환

$last [boolean]
// 마지막에 해당하는 경우 true를 반환

$odd [boolean]
// 홀수번째 값인 경우에만 true를 반환

$even [boolean]
// 짝수번째 값인 경우에만 true를 반환

내장변수를 사용할 경우 해당하는 값에만 스타일을 주는 등의 활용이 가능합니다. 예를들어 홀수번째 해당하는 값들만 빨간색으로 표현할 경우 아래와 같이 사용이 가능합니다.

<style type="text/css">
  .red { color: red; }
</style>

<ul>
  <li ng-repeat="item in fruits">
     <span ng-class="$odd ? 'red' : 'black'">{{ item.name }}</span>
  </li>
</ul>
홀수번째에 해당하는 값의 경우 class명에 red가 추가되는 예제입니다. 즉 모든 홀수번째 아이템은 빨간색으로 처리됩니다.


# 오름차순 정렬하는 방법
아래와 같은 방법으로 원하는 값을 기준으로 정렬이 가능합니다.

<li ng-repeat="item in fruits | orderBy: 'no'">
  ...
</li>
파이프라인 | 뒤에 orderBy를 사용하여 정렬할 기준 값을 입력하면 됩니다. 여기서는 no를 사용하였습니다.