CODEWITHSUNDEEP
angularjs
plus-
plus-

Reputation: 46543

Angular: ng-click with a parameter not working

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?

Upvotes: 7

Views: 11625

Answers (3)

Fizer Khan
Fizer Khan

Reputation: 92895

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;
}

Upvotes: 0

plus-
plus-

Reputation: 46543

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>

Upvotes: 14

Anders Ekdahl
Anders Ekdahl

Reputation: 22943

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

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

Upvotes: 0

Related Questions