CODEWITHSUNDEEP
angularjs
Chris Paterson
Chris Paterson

Reputation: 1149

ng-repeat not working after upgrading from angularjs 1.0.8 to 1.2.3

I recently upgraded from angularjs 1.0.8 to 1.2.3 and it has been a nightmare. So many things have broken, some of which I have been able to figure out. There is a problem with ng-repeat that I have been unable to fix. When using 1.0.8 the following code worked as expected:

<ul id="my_list">
    <li ng-click="doSomething('{{item.item_id}}')" ng-repeat="item in items">
        <span>This is item {{item.item_id}}</span>
    </li>
</ul>

However, now that I have upgraded to 1.2.3 each <li> will display the item_id in the <span> (i.e., "This is item 1", "This is item 2", etc.), but the function still just displays doSomething('{{item.item_id}}') as opposed to, for example, doSomething('1'). Why is {{item.item_id}} binding in one place, but not the other?

Upvotes: 1

Views: 246

Answers (4)

Chris Paterson
Chris Paterson

Reputation: 1149

I figured it out. It was because I wrote the function with a semicolon as the end: doSomething('{{item.item_id}}');. I found that onclick="doSomething('{{item.item_id}}')" doesn't work, but ng-click="doSomething('{{item.item_id}}')" does work.

As a side note: I have been working with angularjs for about 5 months now, and I have to say that it has led to an increase in the complexity of my apps and it is much more complicated that just using jquery. I know many people will disagree, but it just seems like it is MUCH more trouble than its worth. I kind of regret using it.

Upvotes: 0

Matt Zeunert
Matt Zeunert

Reputation: 16561

As Jeff and ceejayoz point out ng-click expects an Angular expression, so you can access scope properties without binding to them.

Use this if you need the parameter as a string:

ng-click="doSomething(item.item_id.toString())"

For adding the value in the DOM you need the curly braces, which tell Angular to expect an expression like ng-click does.

Upvotes: 1

Jeff Hubbard
Jeff Hubbard

Reputation: 9892

ngClick doesn't interpolate the expression. Use doSomething(item.item_id) instead.

Upvotes: 1

ceejayoz
ceejayoz

Reputation: 179994

ng-click takes a JS expression, so <li ng-click="doSomething(item.item_id)" ng-repeat="item in items"> should work.

Upvotes: 1

Related Questions