강좌 & 팁
글 수 2,412
2015.03.20 15:01:13 (*.134.169.166)
47831
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
6번글에서 ng-repeat에 대해서 간단하게 알아보았습니다. 이번에는 ng-repeat를 좀 더 깊이 파고들어보겠습니다.
우선 필요한 파일들을 만들어보겠습니다.
<!DOCTYPE html> <html> <head> <title>Binding</title> </head> <body> <div ng-app="app" ng-controller="foo"> <div class="button" ng-repeat="item in '가나다라마바사아자차카타파하'.split('')"> {{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", []);
브라우저로 확인해보면 각 글자로 나누어져서 한줄에 한글자씩 표시가 되는 것을 확인할 수 있습니다.
각 항목에 번호를 표시해보도록 하겠습니다.
<!DOCTYPE html> <html> <head> <title>Binding</title> </head> <body> <div ng-app="app" ng-controller="foo"> <div class="button" ng-repeat="item in '가나다라마바사아자차카타파하'.split('')"> {{$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>
위와 같이 $index라는 변수를 통해서 반복문 내부에서 현재 아이템의 번호를 알 수 있습니다.
javascript 자체로도 클릭 이벤트를 처리할 수 있지만 부가정보가 좀 더 들어있는 ng-click에서 이벤트를 사용해보도록 하겠습니다.
<!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); }; });
위와 같이 구현을 해서 ng-repeat안에 있는 항목들이 클릭이 됐을 때 개발자 도구를 사용하면 클릭된 아이템에 대한 정보를 얻을 수 있습니다.
app.config안에 있는 내용은 debug log를 출력할 것인지 안 할 것인지를 설정하는 부분으로, log.info를 log.debug로 바꾸고 false로 되어있는 부분을 true/false로 바꾸면서 각각 확인하면 true일 때만 debug log가 출력되는 것을 확인할 수 있습니다.
이렇게 AngularJS에서 제공하는 $event를 사용하면 javascript에서 사용하는 이벤트보다 좀 더 상세한 정보를 얻을 수 있습니다.