Adding ng-click handler to repeated element in angularjs

Question

Im using angularjs 1.0.7 and trying to add a ng-click handler to a list element which is repeated using ng-repeat, but the function does not fire. Below is the html, along with variations I have tried in comments. I have tried adding the same ng-click function on a different element and it works fine.

<div class="results" ng-cloak ng-show="showList != 0">

    <ul>
        <li ng-repeat="movie in movies" ng-click="getPlaylist(movie.id)">{{ movie.title }}</li>
        <!--<li ng-repeat="movie in movies" ng-click="getPlaylist({{movie.id}})">{{ movie.title }}</li>-->
        <!--<li ng-repeat="movie in movies" ng-click="getPlaylist('movie.id')">{{ movie.title }}</li>-->
        <!--<li ng-repeat="movie in movies" ng-click="getPlaylist(\'{{movie.id}}\')">{{ movie.title }}</li>-->
    </ul>
</div>

And here is the controller

main.controller('MoviesListCtrl', function($scope, $http, playlist) {

    $scope.movies = [];
    $scope.showList = false;


    $scope.getMoviesList = function (val) {

        var link = 'titles?q=' + val + '&limit=10'

        $http.get(link).success(function (data) {
            // now we have all our movies and can add them
            $scope.movies = data;

            // if there any movies we can show the list
            if ($scope.movies.length > 0) {
                $scope.showList = true;
            } else {
                $scope.showList = false;
            }
        });
    };

    $scope.getPlayList = function (id) {
        alert(id);

    };

});

@RafaelBarros Still not doing anything.

Errol Fitzgerald
– Errol Fitzgerald

2013-08-07 23:23:39 +00:00
Commented Aug 7, 2013 at 23:23 — Errol Fitzgerald
– Errol Fitzgerald, Commented Aug 7, 2013 at 23:23

George Yates · Accepted Answer · 2013-08-07 23:23:40Z

2

You have an error in your markup, your function in the controller is called getPlayList and in your markup its getPlaylist. Note the capitalization on the l. Here's a fiddle where it's fixed and there's no problem: http://jsfiddle.net/GYatesIII/z7mpW/3/

answered Aug 7, 2013 at 23:23

George Yates

1,2479 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

George Yates Over a year ago

Happens to the best of us. The only reason a fiddle for it exists is because I didn't catch it for a little bit.

George Yates Over a year ago

In a perfect world, Angular would throw an exception when ng-click makes a call to an undefined function.

Collectives™ on Stack Overflow

Adding ng-click handler to repeated element in angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related