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-width="'100%'"
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">
<span>{object.objectName}}</span>
</div>
</div>
</a>
</div>
</div>
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.