ng-repeat with filters that introduce new collections

[jasonkuhrt]

There is a thorough discussion including analysis, ideas, and fiddles here (concluding with some successful work-arounds):

https://groups.google.com/forum/#!msg/angular/IEIQok-YkpU/oKuLvzCnAcoJ

A common instigating use-case is chunking arrays for grids:

http://stackoverflow.com/questions/11056819/how-would-i-use-angularjs-ng-repeat-with-twitter-bootstraps-scaffolding

I believe the issue can be summarized as difficulty using ng-repeat with filters that change the collection's reference...? Brainstorming possible directions forward:

1. Would track by 61f2767 syntax make it possible to use filters that subsequently change the collection reference? It seems to me track by and this issue have nothing to do with each other ultimately.

2. Could/should this issue by resolved by new additions to angular's destructing syntax? i.e.

   row in items chunk by 6
   

   Seems to me to be too specific a feature to make part of the destructing syntax.

3. An angular $service that supports creating filters that modifier collection reference within ng-repeat. So that chunk or any other filter could be confidently applied to ng-repeat:

   What users are rolling on their own: http://jsfiddle.net/pkozlowski_opensource/zvpVg/2/

[olefriis]

Hi there! (I'm one of the guys from the Google Groups discussion...)

As I see it, the problem is that the ng-repeat directive (https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js) tracks changes to the given list in a quite complex way, assigning hash functions to the elements of the array, and not the way angular.equals (http://docs.angularjs.org/api/angular.equals) does it. As far as I can tell, angular.equals does a "deep compare" on arrays, and recursively so for arrays of arrays, etc.

When writing a chunk filter (my attempt: https://github.com/olefriis/simplepvr-backend-ruby/blob/master/public/js/filters.js) the most obvious way to do it is to... well, chunk the input array into a number of new arrays. This means that each time such a chunk filter is invoked, it will create new array instances, and ng-repeat will treat the output as completely new values each time.

If we could just make ng-repeat use angular.equals, all would be fine. I am aware that this may be slowing down execution for insanely large data sets, but having some way to switch on this behavior would be nice.

That's my 50 cent. Hope it's useful, and thanks for reading!

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[jasonkuhrt]

@btford the issue is outlined clearly above. I would appreciate at least a single comment from the Angular team rather than asking us to try a new version of angular and add yet more feedback.

Thanks

[tiredenzo]

Hello, I ran in the same issue to. the $$hashkey value is missing on newly created elements. the problem is well described in the google group post.

Thank you

[btford]

See track by in AngularJS 1.2.0. It should solve this issue.

[olefriis]

I tried using track by, but could not make it solve my problem. I wanted to create Twitter Bootstrap "row" divs with exactly 3 sub-divs in each, which is why I wrote my own chunk filter (which chunks one array into an array of arrays, each of a specified size). I cannot make this chunk filter work with AngularJS 1.2, and I did try using track by. I assume it's just me being too dumb, since the AngularJS developers are generally really awesome and very intelligent people.

However, in AngularJS 1.2 there's the ng-repeat-start and ng-repeat-end directives, and using these, I can periodically insert a "clearfix" div, which is good enough for me. See here for an example.

I might try a second time to make my chunk filter work in the weekend. If anybody has a jsfiddle or something showing how to do a chunk filter in AngularJS 1.2, I'll be very interested.

[olefriis]

So, I've fiddled a bit with track by and my own chunk filter. I have made a very simple example which shows that I'm too stupid to make it work :-) - github.com/olefriis/angularjs-chunk

I've read the docs on track by, and I think I get it, but I still cannot make it work.

[olefriis]

...and here's a JSFiddle in case you prefer that. http://jsfiddle.net/olefriis/cag9a/1/

When running the fiddle, the output is correct, but Angular throws a digest error in the JavaScript console.

[kzar]

I'm not sure that track by helps us with the problem because I think you have to use it before the filter. If we could do something like ng-repeat item in items | chunk:3 track by $index maybe it would work. (I might be wrong there!) My attempt http://plnkr.co/edit/Nyfa9bSOeBYBTfKmJ0oY?p=preview

Edit:

I have managed to get a hack working but I'm not sure how performant it'll be! (I serialise each chunk to JSON and then parse as I use it.) Here you go anyway http://plnkr.co/edit/XT3tJMlBKvIodYUkoVkO?p=preview

[nizsheanez]

but if you will filter $scope.$watch array like in your exercise, you will have:
Uncaught Error: 10 $digest() iterations reached. Aborting!

[nizsheanez]

i use this pattern:

<div ng-repeat="item in array" ng-switch on="$index % 2">
   <div class="row" ng-switch-when="0">
       <div class="col-md-6" render-item-directive directive-var="array[$index+0]"></div>
       <div class="col-md-6" render-item-directive directive-var="array[$index+1]"></div>
   </div>
</div>

[olefriis]

That's a nice idea. However, in case you have an odd number of elements in your array, the last "array[$index+1]" will be "undefined", which you then need to handle in your directive.

[nizsheanez]

which way is better to handle it?