03. controller 사이의 데이터 공유 : http://forum.falinux.com/zbxe/index.php?document_srl=805325
04. controller에 메소드 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=805915

이때까지 사용한 ng-repeat는 html tag를 하나만 사용할 수 있는 단점이 있습니다.

여러 개의 tag를 사용할 경우를 알아보도록 하겠습니다.

지난 글에서 사용했던 소스를 그대로 이어서 작업하겠습니다.
?
public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
 
 
  <div ng-app="app" ng-controller="foo">
    <div class="button"
        ng-repeat="item in '가나다라마바사아자차카타파하'.split('')"
        ng-click="itemClicked($event)">
      {{$index + 1}}. {{item}}
    </div>
  </div>
 
<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>

?
public/javascripts/main.js
1
2
3
4
5
6
7
8
9
10
11
var app = angular.module("app", []);
 
app.config(function($logProvider) {
    $logProvider.debugEnabled(false);
});
 
app.controller("foo", function($scope, $log) {
    $scope.itemClicked = function(ev) {
      $log.info(ev);
    };
});


브라우저로 확인하면 다음과 같이 나올 것입니다.

?
결과
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1. 가
2. 나
3. 다
4. 라
5. 마
6. 바
7. 사
8. 아
9. 자
10. 차
11. 카
12. 타
13. 파
14. 하



index.html을 다음과 같이 수정하겠습니다.

?
public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
 
 
  <div ng-app="app" ng-controller="foo">
    <div ng-repeat-start="item in '가나다라마바사아자차카타파하'.split('')"></div>
      <div>{{$index + 1}}</div>
      <div>번 째는 </div>
      <div>{{item}}</div>
      <div>입니다</div>
      <div> </div>
    <div ng-repeat-end></div>
  </div>
 
<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>


결과를 확인해보면 다음과 같습니다.

?
결과 #2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
1
번 째는
가
입니다
  
2
번 째는
나
입니다
  
3
번 째는
다
입니다
  
4
번 째는
라
입니다
  
5
번 째는
마
입니다
  
6
번 째는
바
입니다
  
7
번 째는
사
입니다
  
8
번 째는
아
입니다
  
9
번 째는
자
입니다
  
10
번 째는
차
입니다
  
11
번 째는
카
입니다
  
12
번 째는
타
입니다
  
13
번 째는
파
입니다
  
14
번 째는
하
입니다


이렇게 ng-repeat-start와 ng-repeat-end를 사용하면 마치 for(...) { .... } 처럼 활용할 수 있습니다.


주의해야할 것은 ng-repeat-start와 ng-repeat-end는 같은 레벨에 있어야한다는 것입니다.


?
public/index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
        <title>Binding</title>
</head>
<body>
 
 
  <div ng-app="app" ng-controller="foo">
    <div ng-repeat-start="item in '가나다라마바사아자차카타파하'.split('')"></div>
      <div>{{$index + 1}}</div>
      <div>번 째는 </div>
      <div>{{item}}</div>
      <div>입니다</div>
      <div> </div>
    <div>
      <div ng-repeat-end></div>
    </div>
  </div>
 
<script type="text/javascript" src="components/angularjs/angular.js"></script>
<script type="text/javascript" src="components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>


이렇게 하면 아래와 같이 angurlar-js는 ng-repeat-end를 찾을 수 없다는 에러를 발생시킵니다.


?
1
2
3
4
5
6
7
8
9
10
11
12
Error: [$compile:uterdir] Unterminated attribute, found 'ng-repeat-start' but no matching 'ng-repeat-end' found.
http://errors.angularjs.org/1.3.3/$compile/uterdir?p0=ng-repeat-start&p1=ng-repeat-end
    at REGEX_STRING_REGEXP (angular.js:63)
    at groupScan (angular.js:7141)
    at applyDirectivesToNode (angular.js:7229)
    at compileNodes (angular.js:6925)
    at compileNodes (angular.js:6937)
    at compile (angular.js:6832)
    at angular.js:1439
    at Scope.$get.Scope.$eval (angular.js:14204)
    at Scope.$get.Scope.$apply (angular.js:14302)
    at bootstrapApply (angular.js:1437)



이 게시물을...