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에서 사용하는 이벤트보다 좀 더 상세한 정보를 얻을 수 있습니다.

이 게시물을...