Collection repeat for array with objects

For an array of objects like this:

    		"id" : "id1",
    		"key" : "value1",
    		"id" : "id2",
    		"key" : "value2",

the collection repeat directive does not list out the first object in the array. That is if I obtain this as collection-repeat="object in objects" in my view, then object[0] will not be displayed and to add to that another object that is object[2] (array length + 1 for array of any size) is created (though it does not exist in the array) and it is added to the DOM with contents set to null

Right now I am duplicating an additional element to [0]th position in the array, so that the first item wont get missed. And to avoid the the additional list element at the end of the array, I just using ng-if like:

<div class="collection-item"
  collection-repeat="object in objects"
  collection-item-height="getItemHeight(object, $index)"
  ng-style="{height: getItemHeight(object, $index)}">

    <div ng-if="object.objectName">
      <a  ui-sref="something">
        <div class="card">
          <div class="item item-icon-left item-icon-right item-text-wrap">


The <div ng-if="object.objectName"> will avoid a stray list element at the end of the array. And to avoid the first ([0]th) element being missed, just duplicate the element so that (0th and 1st element in the array is same). This is not a solution. Just a quick hack. If someone comes up with the reason please do post it. I am following this post.

I cannot recreate your original problem. Please see my codepen

I created a collection-repeat element and it shows both object[0] and object[1].
Note: Sorry for all the edits to this response. What I have now should be correct. Seriously.

I can confirm that this is happening. The first item is not shown, instead there is an empty element at the end of the list. From what I can see in the console, the first item is not getting a $$hashkey field, whereas the others are (up to a certain number, I assume to the ones that are showing or next in line to show).

1 Like

Iā€™m running into the same problem. Is there a resolution or workaround?

I ditched collection repeat and used crosswalk. Even just with regular ng-repeat a 1000 item list scrolls seamlessly and moreover when I used collection repeat the list performance degraded on my app where as it was super fast on the desktop browser.

@siddhartha, I just looked at crosswalk out of curiosity after reading your comment, looks tempting, but I have few concerns so thought of discussing here. Looks like crosswalk is meant only for Android, how has been your experience of your crosswalk app on iPad/windows phone.

also, I use ripple emulator (Chrome app) to test my app on my development machine. When reading crosswalk intro, I got a feeling that I would be able to test crosswalk only on device or some particular device emulators they provide which can be installed on windows/linux. (actually I am not very clear here what exactly they are saying). Any idea on this , what you use to test your app during development?

and , crosswalk seem to be increasing the app size by 40MB, not sure if I should be concerned with that.