CODEWITHSUNDEEP
angularjs-ng-repeatx-editable
user1539847
user1539847

Reputation: 1

why does this happen in x-editable + ng-repeat

I have been exploring Angular X-editable project for a while and came across this odd behavior.

Whenever I click on any one of the 3 'select' components and try to change the value from the dropdown, the method 'showStatus(..)' gets fired for other components as well that are inside the ng-repeat boundary. (which you can check through the console.)

Can you please tell me why is this happening? Am I missing something.. ?

EDITED LINK -> Fiddle : http://jsfiddle.net/hrr4M/4/

<span  ng-repeat="d in list" >
  <a href="#" editable-select="d.status" e-ng-options="s.value as s.text for s in statuses">

       {{ showStatus(d.status) }}

  </a> <br/>
</span>

Upvotes: 0

Views: 1542

Answers (1)

Chris Preston
Chris Preston

Reputation: 634

The problem you have is that your binding 

{{ showStatus(d.status) }}

fires up the function for every item, because as every item gets populated, it just refreshes and fires again, all of them.

This is not the right place to set this up.

I set up a modified fiddle for you: http://jsfiddle.net/hrr4M/13/

Inside the link statement I added

onaftersave="showStatus($data)"

That way, you can fire a function after an item has been selected (see docs for onaftersave vs onbeforesave), and you can get the selected value using $data.

Now it works already. The problem is, that your binding is still using the same function, and therefore firing up all the time.

I duplicated the function and renamed it to repeatFiller with the same functionality but omitting the console logs, so you can see it works. You might tweak that a bit but I think it does what you need.

Upvotes: 2

Related Questions