AngularJS - controller method doesn't get called on ngClick - no error

Question

I try to call the method removePlayer(playerId) if a button gets clicked. But, the method doesn't get called, or at least the statements inside it aren't firing, because I put a console.log() statement at the top.

The console is empty, so I'm really clueless. Here is my code:

Controller:

function appController($scope) {
    $scope.players = [];
    var playercount = 0;

    $scope.addPlayer = function(playername) {

        $scope.players.push({name: playername, score: 0, id: playercount});
        playercount++;
    }

    function getIndexOfPlayerWithId(playerId) {
        for (var i = $scope.players.length - 1; i > -1; i--) {
            if ($scope.players[i].id == playerId)
                return i;
        }
    }

    $scope.removePlayer = function(playerId) {
        console.log("remove");
        var index = getIndexOfPlayerWithId(playerId);
        $scope.players.slice(index, 1);
    }
}
appController.$inject = ['$scope'];

HTML:

...
<table id="players">
        <tr ng-repeat="player in players">
            <td>{{player.name}}</td>
            <td>{{player.score}}</td>
            <td><button ng-click="removePlayer({{player.id}})">Remove</button></td>
        </tr>
    </table>
...

Why is the player object in the controller, not in the model? — Lee Goddard
– Lee Goddard, Commented Sep 4, 2013 at 11:40
I was just trying out AngularJS, just to discover what it was. It wasn't a 'real' project. @LeeGee — 11684
– 11684, Commented Sep 5, 2013 at 15:23

pkozlowski.opensource · Accepted Answer · 2012-11-08 19:39:11Z

38

You shouldn't be using curly braces ({{ }}) in the ng-click expression. You should write:

<button ng-click="removePlayer(player.id)">Remove</button>

answered Nov 8, 2012 at 19:39

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

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

3 Comments

dnc253 Over a year ago

Does the new ng-repeat scope just inherit from the parent scope? So the $parent in my answer wouldn't be necessary?

pkozlowski.opensource Over a year ago

Yes, scopes created by ng-repeat inherit from a parent scope so the $parent reference is not needed. In fact one should rather avoid using $parent since it strongly links expressions in the event handlers with the template structure (it is enough to insert another scope-creating directive and things might break).

dnc253 Over a year ago

Thanks, that all makes sense. I just remember seeing places that were using $parent in an ng-repeat, and was thinking this was the issue. +1 to you.

dnc253 · Accepted Answer · 2012-11-08 19:31:34Z

4

ng-repeat creates a new scope, so it doesn't know what removePlayer is. You should be able to do something like this:

<table id="players">
    <tr ng-repeat="player in players">
        <td>{{player.name}}</td>
        <td>{{player.score}}</td>
        <td><button ng-click="$parent.removePlayer({{player.id}})">Remove</button></td>
    </tr>
</table>

See https://groups.google.com/forum/?fromgroups=#!topic/angular/NXyZHRTAnLA

answered Nov 8, 2012 at 19:31

dnc253

40.4k41 gold badges145 silver badges160 bronze badges

2 Comments

11684 Over a year ago

Wow, I didn't know about this. Trying now!

dnc253 Over a year ago

Can you create a jsFiddle that recreates the problem? That'll make it easier to diagnose the exact problem. Also, I just noticed the {{}} in the call to the function. I believe you don't need those when calling the function.

jke · Accepted Answer · 2013-08-28 18:06:06Z

-1

As stated, ng-repeat creates it's own scope, and the outer controller scope is not available. But since in JS you are using true objects write something like this:

<tr ng-repeat="player in players">
    <td>{{player.name}}</td>
    <td>{{player.score}}</td>
    <td><button ng-click="player.removePlayer()">Remove</button></td>
</tr>

Beforehand, somewhere on your controller initialization you can assing the "removePlayer" function to each of your player object and naturally code in anything you want, thus accessing outer controller indirectly.

answered Aug 28, 2013 at 18:06

jke

11

Collectives™ on Stack Overflow

AngularJS - controller method doesn't get called on ngClick - no error

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related