강좌 & 팁
2015.03.27 17:03:58 (*.134.169.166)
43349
01. Binding : http://forum.falinux.com/zbxe/index.php?document_srl=804623
02. Controller : http://forum.falinux.com/zbxe/index.php?document_srl=804950
03. controller 사이의 데이터 공유 : http://forum.falinux.com/zbxe/index.php?document_srl=805325
04. controller에 메소드 만들기 : http://forum.falinux.com/zbxe/index.php?document_srl=805915
05. Filter : http://forum.falinux.com/zbxe/index.php?document_srl=806499
06. ng-repeat와 filter의 응용 : http://forum.falinux.com/zbxe/index.php?document_srl=806788
07. Directive : http://forum.falinux.com/zbxe/index.php?document_srl=807545
08. Directive #2 : http://forum.falinux.com/zbxe/index.php?document_srl=808009
09. $scope? scope? : http://forum.falinux.com/zbxe/index.php?document_srl=818891
10. templateUrl 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=826765
11. routeProvider 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=828375
12. routeProvider 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=828883
13. promise 사용하기 : http://forum.falinux.com/zbxe/index.php?document_srl=830819
14. promise 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=831099
15. ng-repeat 사용하기 #2 : http://forum.falinux.com/zbxe/index.php?document_srl=831382
이때까지 사용한 ng-repeat는 html tag를 하나만 사용할 수 있는 단점이 있습니다.
여러 개의 tag를 사용할 경우를 알아보도록 하겠습니다.
지난 글에서 사용했던 소스를 그대로 이어서 작업하겠습니다.
<!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>
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. 하
index.html을 다음과 같이 수정하겠습니다.
<!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>
결과를 확인해보면 다음과 같습니다.
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는 같은 레벨에 있어야한다는 것입니다.
<!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를 찾을 수 없다는 에러를 발생시킵니다.
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)