CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Agat
Agat

Reputation: 358

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

Upvotes: 3

Views: 871

Answers (2)

Agat
Agat

Reputation: 358

Ok, here is hack we could use to solve the case without track by or $$hashKey

ng-repeat="item in t = angular.equals(t, f(a)) ? t : f(a)"

But this does answer the question why examples in question are does not work. So, please, if you know the answer - post it - I would be very grateful

Upvotes: 0

KhalilRavanna
KhalilRavanna

Reputation: 6058

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.

Upvotes: 1

Related Questions