从angularjs 1.0.8升级到1.2.3后，ng-repeat无法正常工作

Question

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> (ie, "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?

Answer 1

ng-click采用JS表达式，因此<li ng-click="doSomething(item.item_id)" ng-repeat="item in items">应该有效。

Answer 2

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

Answer 3

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.

Answer 4

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.