Search code examples
angularjsfunctionlabelng-bind

angularjs bind function call to span without triggering event

I use ng-repeat to populate my table. One of the columns in the table should be dynamically populated again by a different function call.

Below is my code snippet.

<tr ng-repeat="item in ctrl.items">      
  <td><span ng-bind="item.name"></span></td>
  <td><span ng-bind="getItemDetails(item.id)"></span></td>
</tr>

I have array of items. I need to display those items in a table. Item name will be present in the item object, however, item details will be populated by another function call which needs item id.

On using ng-bind (like in the code above) I face 2 issues.

  1. Multiple calls to function even if array has 1 items. Sometimes it goes on thereby freezing my browser and server out of memory issue
  2. The item id doesn't get passed to function always. Sometimes it is undefined.

I am not sure if ng-bind is the right directive to be used. ng-model doesn't work though. Is there any other directive or other way to do it?

How can I achieve this?

EDIT:

Here is the jsfiddle url: https://jsfiddle.net/grubxaur/

If you check browser console, you can see the function is called twice. I guess it is called N no. of times where N is no. of columns in the table.

Solution

  • I have tweaked my implementation a bit to get rid of this issue. Rather than calling a function within ng-repeat, I modified the items array within the controller using angular.forEach before ng-repeat is invoked.

    Something like code below.

    angular.forEach(self.items, function(item){
     item.details = $scope.getItemDetails(item.id);
});