Angular ng-click giving Syntax Error: Token '{' invalid key at column 22 of the expression

Question

Before I post my question, just want to let you know I searched enough and couldnt find the solution. This issue is perplexing me.

I have following code. First ng-click correctly inserts the ID in the function, but generates angular error (mentioned in subject). Second ng-click neither generates error nor inserts the ID, instead it renders the literal.

I searched all the forums and most mentioned to use it like my 2nd ng-click but it is not working for me. Help required!

<tr ng-repeat="registration in vm.filteredList">
    <td>{{registration.id}}</td>
    <td>{{registration.dateModified | date}}</td>
    <td>
        <a class="btn btn-primary" ng-click="vm.editRegistration({{registration.id}})" href="#">E</a>
        <a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
    </td>
</tr>

ANSWER:

I did some testing and found out it is confusing for newbie because in HTML inspector of FF or Chrome developer toolbar, you will see that code will render

<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>

instead of

<a class="btn btn-danger" ng-click="vm.deleteRegistration(1)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(2)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(3)" href="#">D</a>

but when the actual function fires it will pass the right value. For example below function will receive and show 1,2,3 etc.

vm.deleteRegistration = function (id) { alert("ID: " + id)};

Hopefully it explains and helps.

Belanger

Spent 1 hr of my life over this. Should have landed on the page sooner instead of debugging on developer tools !!! – Nate

Answer 1

Should use

ng-click="vm.editRegistration(registration.id)"

without {{ & }}

Competence

you are right. Thats what I am doing for vm.deleteRegistration. What I just realized that in the HTML (if you see in firebug or chrome's toolbar) you will see that it will render vm.deleteRegistration(registration.id) instead of vm.deleteRegistration(1). That is very confusing for someone who is not angular expert as it will make him think that something in wrong. While in reality in the function itself it will pass right value. – Belanger

Answer 2

I did some testing and found out it is confusing for newbie because in HTML inspector of FF or Chrome developer toolbar, you will see that code will render

<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(registration.id)" href="#">D</a>

instead of

<a class="btn btn-danger" ng-click="vm.deleteRegistration(1)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(2)" href="#">D</a>
<a class="btn btn-danger" ng-click="vm.deleteRegistration(3)" href="#">D</a>

but when the actual function fires it will pass the right value. For example below function will receive and show 1,2,3 etc.

vm.deleteRegistration = function (id) { alert("ID: " + id)};

Hopefully it explains and helps.

Belanger

Answer 3

I was using the code:

<div ng-click="joinPublicCourse({{course.id}})"> 
</div>

But browser kept logging the "Token '{' invalid key at column 19 of the expression...." error.

Course's definition goes like this:

course = {
   id: '123',
   ...
}

Then I figured angualrjs could take course.id as a variable name, not a normal string. So I changed my code:

<div ng-click="joinPublicCourse('{{course.id}}')"> 
</div>

And this one succeeded.

Acree