AngularDart table data binding not working

Question

In a Chrome Packaged app, using angular.dart, in a component html I have the below table which is dispaying paginated contents of an object list; exp. jobs :

<tbody>
    <tr id="{{job.jobID}}" ng-repeat="job in jComp.jobs | pagination:jComp.paginator.instance" ng-model="job" ng-click="jComp.selectJob(job.jobID)">
    <td>{{job.jobID}}</td>
    <td>
      {{job.productID}}<br>
      {{job.productDescription}}<br>
    </td>
    <td>{{job.productType}}</td>
    <td><img alt="No thumb" ng-src="{{job.thumbFURL}}"/></td>
    <td>{{job.status}}</td>
  </tr>
</tbody>

then in my component I am showing a popup modal div to ask user to choose an action. When the user clicks to change the job.status, there is a second layer of confirmation modal, and once confirmed in the component I am finding the job from the jComp.jobs List and updating the status. In side the popup modal the status gets updated but on the table it still shows the old status. And then when I paginate to next page and come back it gets updated. Before page switch it stays the same ? I tried calling scope.apply() after updating the jobs list, but it doesn't help. I like to know what is paginator.goNext() or paginator.goPrev() doing that causes the table list to refresh. Not clear about how the two way data binding working in this scenario. ( pagination is done using angular_pagination package )

UCJava UCJava · Accepted Answer · 2014-09-12T16:37:35

I tried using :

<td ng-bind="job.status"/>

instead of:

<td>{{job.status}}</td>

and it fixed this issue. I am not sure why double brackets were not registering the object in the list to the change listeners / watchers. As far as I understand two way binding should be working with {{}} but in this case something was breaking it. It might be a bug in double brackets.

AngularDart table data binding not working

1 Answers