CODEWITHSUNDEEP
javascriptangularjs
nobinobiru
nobinobiru

Reputation: 792

How to avoid multlple times called method at angular's ng-repeat

I've write this code. But it called three times called when I clicked image. It should be called foo() method once.Do you have any idea? 

<div ng-controller="photoCtrl">

        <img ng-src="{{currentImg.path}}" class="current-img"></img>
        <p>
        <ul>
            <li ng-repeat="image in images" class="thumb-list">
            <img ng-src={{image.path}}/ class="thumb" ng-click={{foo()}}></img>
            </li>

        </ul>

</div>

PhotoCtrl is here...

var photoCtrl = function($scope){
    $scope.images = [
        {"path":"img/a.jpeg"},
        {"path":"img/b.jpeg"},
        {"path":"img/c.jpeg"}
    ];
    $scope.currentImg = _.first($scope.images);

    $scope.foo = function(){
        console.log("Called");
    };

    $scope.setCurrentImg = function(item){
        console.log("callellellellellle");
    };

};

Upvotes: 0

Views: 507

Answers (1)

Steven
Steven

Reputation: 2698

foo() is being executed each time the li template is rendered (3 times as you have 3 images) because it is enclosed in {{ }}.

Try

ng-click="foo()"

instead.

Upvotes: 1

Related Questions