Angular js - Tutorial 4. Event

각 작품 클릭시 평점이 뜰 수 있게 click 이벤트를 줘봅시다. (ng-click 사용)

[ html ]
 
<li data-ng-repeat="webtoon in webtoons">
    <a href="#none" class="link_webtoon" data-ng-click="showScore(webtoon.averageScore)">
        <span class="num_count">{{ ${d}index+1 }}</span>
        <img data-ng-src="{{ webtoon.thumbnailImage2?webtoon.thumbnailImage2.url:'default.jpg' }}" class="img_webtoon">
        <strong class="tit_webtoon">{{ webtoon.title }}</strong>
        <span class="txt_artist">{{ webtoon.cartoon.artists[0].name }}</span>
    </a>
</li>

[ js ]
 
webtoonApp.controller('webtoonListCtrl', function($scope, $http){
    $http.get('json url here..').success(function(data){
        $scope.webtoons = data.data.webtoons;
    });
    
    //평점 메세지
    $scope.showScore = function(score){
        alert('평점 : ' + score);
    };
});

HTML 요소에서 사용 가능한 이벤트 리스너 

• ng-click
• ng-dbl-click
• ng-mousedown
• ng-mouseup
• ng-mouseenter
• ng-mouseleave
• ng-mousemove
• ng-mouseover
• ng-keydown
• ng-keyup
• ng-keypress
• ng-change