Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular JS ng-repeat - track by dynamic collection

I'm trying to make ng-repeat over function call result, like

<body ng-init='a = [1, 2, 3]'>
  <div ng-repeat='item in f(a) track by item[0]'>{{item}}</div>
</body>

where f is

function f (arr) {
    return arr.map(function (v) {
      return [v]
    })
  }

Here is Plunker with this code

Problem is that in console we can see errors like 10 $digest() iterations reached. Aborting!

This is not because of recreating container array, because if we just modify line 3 like

return [v] -> return v

and remove

track by item[0] 

everything works. This is because of recreating items, and track by should handle this. But for some reason it doesn't :(

I was also trying to solve the problem without track by buy putting constant $$hashKey on each item (even on collection itself). Here is Plunker with same error. Hope some one could explain why this is not working

So there is two separate questions: case with track by and case with $$hashKey

BTW Yes, I read How to Loop through items returned by a function with ng-repeat? and AngularJS InfDig error (infinite loop) with ng-repeat function that returns array of objects more than a few times, but can't find an answer there

Thanks

like image 369
Agat Avatar asked Aug 11 '26 21:08

Agat


1 Answers

Is there any reason you can't compute the result and then display it? I.e. have ng-init="a = [0,1,2]; fa = f(a);" and then ng-repeat="item in fa" ?

Working plunkr example

If you need to have that computed result updated when a changes you could just have a $scope.$watch statement watching for changes to a and then updating fa.

like image 90
KhalilRavanna Avatar answered Aug 13 '26 12:08

KhalilRavanna



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!