I have a simple loop with ng-repeat
like this:
<li ng-repeat='task in tasks'>
<p> {{task.name}}
<button ng-click="removeTask({{task.id}})">remove</button>
</li>
There is a function in the controller $scope.removeTask(taskID)
.
As far as I know Angular will first render the view and replace interpolated {{task.id}}
with a number, and then, on click event, will evaluate ng-click
string.
In this case ng-click
gets totally what is expected, ie: ng-click="removeTask(5)".
However... it's not doing anything.
Of course I can write a code to get task.id
from the $tasks
array or even the DOM, but this does not seem like the Angular way.
So, how can one add dynamic content to ng-click
directive inside a ng-repeat
loop?
Instead of
<button ng-click="removeTask({{task.id}})">remove</button>
do this:
<button ng-click="removeTask(task.id)">remove</button>
Please see this fiddle: