Angular: ng-click with a parameter not working

Question

I've got the following HTML:

<i style="cursor:pointer" ng-click="addName()" class="icon-plus"></i>
<i style="cursor:pointer" ng-click="delName({{$index}})" class="icon-remove"></i>

And the following functions in my controller's $scope:

$scope.addName = function() {
    $scope.names.push($scope.newName);
    $scope.newName = '';
};
$scope.delName = function(i) {
    $scope.names.splice(i, 1);
};

The addName() works fine but the delName() is never called. Is it impossible to bind an ng-clik to a function with an argument?

plus- · Accepted Answer · 2013-02-25 13:09:40Z

14

The error was in the html, the ng-repeat $index should not be evaluated beforehand:

This is the valid HTML:

<i style="cursor:pointer" ng-click="delName($index)" class="icon-remove"></i>

answered Feb 25, 2013 at 13:09

plus-

46.7k16 gold badges63 silver badges74 bronze badges

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

6 Comments

user1883793 Over a year ago

I am having similar problem, updateProductState({{product_id}}), it doesn't trigger the function, but if I hard code a static value it would work. any idea? thanks

plus- Over a year ago

have you tried updateProductState(product_id)? You don't need the {{ }} in an ng directive

TyMayn Over a year ago

Thanks. The above helped my problem. Can you explain why {{ }} is not needed in a directive?

plus- Over a year ago

@TyMayn In fact it's the other way around, it's because you are not in a directive that you need the {{ }}. Most angular directives are evaluating expressions (see docs.angularjs.org/api/ng.directive:ngClick and docs.angularjs.org/guide/expression). The {{ }} are used to evaluate expressions outside of a directive in the HTML at compile time (see docs.angularjs.org/api/ng.$interpolate).

TyMayn Over a year ago

@plus- Thanks. That helps a lot. God bless stackoverflow :)

|

Anders Ekdahl · Accepted Answer · 2013-02-25 13:09:22Z

0

The code seems fine to me, can you isolate your problem in a jsFiddle?

EDIT: Removed incorrect answer about splice not modifying to array.

edited Feb 25, 2013 at 13:09

answered Feb 25, 2013 at 12:59

Anders Ekdahl

23k4 gold badges73 silver badges61 bronze badges

2 Comments

plus- Over a year ago

Plain wrong: splicedoes modify the original array and returns the REMOVED items. My problem is the function is never called anyway.

Anders Ekdahl Over a year ago

Ah, you're right, I'm tired I guess. Just answered another question about Array.filter which returns a new array. Sorry.

Fizer Khan · Accepted Answer · 2013-12-20 13:37:30Z

0

You can do as follows

<i ng-click="delName($index)" class="icon-remove"></i>

In css

[ng-click],
[data-ng-click],
[x-ng-click] {
    cursor: pointer;
}

answered Dec 20, 2013 at 13:37

Fizer Khan

93.6k30 gold badges147 silver badges156 bronze badges

Collectives™ on Stack Overflow

Angular: ng-click with a parameter not working

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related