I’m attempting to use collection-repeat to solve the performance problem created with long lists rendered with ng-repeat. Can collection-repeat be used to render a list a user is actively adding items to?
This is my list:
<ion-content overflow-scroll="false">
<ion-list>
<ion-item collection-repeat="pack in packs track by pack.id" ng-click="packDive(pack)">
<ion-option-button ng-click="rejectPack(pack)">
Reject
</ion-option-button>
<ion-option-button ng-click="auditPack(pack)">
Audit
</ion-option-button>
<div class="row">
<status-icon ng-if="stagedPack(pack)"></status-icon>
<status-icon ng-if="packAudit(pack)"></status-icon>
<img ng-if="hotItem(pack)" src="components/images/hot-item-indicator.svg"/>
<img ng-if="damagedPackSingle(pack)" src="components/images/reject-item-indicator.svg">
<div class="col">
ID#
</div>
<div class="col">
<div class="pack-info-id">{{pack.id}}</div>
</div>
<div class="col">
<i class="icon ion-chevron-right"></i>
</div>
</div>
</ion-item>
</ion-list>
</ion-content>
When the user enters another pack id, it adds a record to the packs array. So this list will continue to grow.
Collection repeat sounds ideal, but I can’t get it to work. It shows the first item the user adds but nothing after that. I can see the items being added in the html (its even adding them twice for some reason??), but nothing in the view.
Any ideas on how to make collection-repeat work for this or is there a better approach to this problem?