angular ng-repeat 사용

설명글에 말이 짧음을 이해해 주세요.
http://m.todayhumor.co.kr/view.php?table=programmer&no=13376
ng-repeat는 angular에서 배열 정보를 view단에 보여줄때 사용한다.

질문? 배열의 시작, 끝에 특정 함수를 실행하고 싶다.
** 일반적인 사용 예
1. ng-repeat는 미리 준비된 directive 이다.

2. ng-repeat는 자체 scope를 가지고 있다.

3. 그 스코프안에는 다음 정보들이 있다.
$index : 배열의 index
$first : 배열의 처음, true / false
$middle: 배열의 중간, true / false
$last : 배열의 마지막 true / false
$even: 배열의 짝수, true / false
$odd: 배열의 홀수, true / false

https://docs.angularjs.org/api/ng/directive/ngRepeat

4. 사용예

1
2
3
4
5
6
7
8
9
10
11
12
13
var cling = angular.module('cling', []);
 
cling.controller( 'exampleCtrl',function ($scope) {
  $scope.items = [
     'angular',
     'node',
     'mongo'
  ];
});
 
<div ng-repeat="item in items">
  tool :  {{item}}
</div>
Colored by Color Scripter
cs

이와 같이 사용하게 된다.
다시 질문으로 돌아와서 시작, 끝에 특정 함수를 실행하려면 어떻게 하는가?

답을 먼저 말하자면, "directive를 만들어 사용하면 된다" 이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
cling.directive('callFunction', function () {
   return {
     restrict: 'A',
     link: function ($scope, $element, $attr) {
       if ($scope.$first) {
          console.log('first item printed');
          console.log('call function 1');
       } else if ($scope.$last) {
          console.log('last item printed'); 
          console.log('call function 2');
       }
     }
   }
});
 
<div ng-repeat="item in items" call-function>
  tool :  {{item}}
</div>
Colored by Color Scripter
cs

1. directive는 자식으로서 scope 따로 가질 수 도 있고, 부모의 scope 안에서 동작하게 할 수 있다.

2. 한 element내에서 서로다른 directive를 써서 scope를 분리할 수 없다. (음 이해 못하면 넘어가도 상관없음)

3. 즉 ng-repeat라는 디렉티브와 같은 element에 call-function 이라는 디렉티브를 만들어 넣으면 된다.

동작하는 코드 http://plnkr.co/edit/nx1FKR7MnZOVH9ctNix0?p=preview

결론 directive를 만들어 사용하자.

추가로 내용1 과 내용2가 view의 표현이 다르다면 사용방법이 옳다고 볼 수 있다.
하지만 단지 function 를 호출하기 위해 view 단을 조작하는 것은 잘못된 접근 방법이다.

1
2
3
4
5
6
7
8
<div ng-repeat = 'list in data'> 
  <div ng-if='{{$index}} == 0'> // ng-reapat 가 처음일때 
    // 내용 1
  </div> 
  <div ng-if='{{$index}} == data.length-1'> // ng-reapat 가 마지막일때 
    // 내용 2
   </div> 
</div>
Colored by Color Scripter
cs