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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With