Items Being Appended Briefly on List


#1

Hello Everyone.

I’ve just started with Ionic and working on a small application.

I used Phonegap’s Cloud Build service (build.phonegap.com) to create a prototype concept of my application.

The application is a simple one, sort of reviewing some checklist and has Previous and Next buttons to traverse a list.

The list is defined in JavaScript like:

var itemList = [
	{
		name: Cargo Box 1,
		items:[
			{id: 0, toolName: 'JackHammer'},
			{id: 1, toolName: 'Cutting Bolt'},
			{id: 2, toolName: 'Drill Bits'},
			{id: 3, toolName: 'Rigging Saw'}
		]
	},
	{
		name: Cargo Box 2,
		items:[
			{id: 0, toolName: 'Staple Gun'},
			{id: 1, toolName: 'Hand Saw'},
			{id: 2, toolName: 'Spin Saw'},
			{id: 3, toolName: 'Drill Gun'}
		]
	},
	{
		name: Cargo Box 3,
		items:[
			{id: 0, toolName: 'Utility Knife'},
			{id: 1, toolName: 'Rock Bolt'},
			{id: 2, toolName: 'Hammer Drill'},
			{id: 3, toolName: 'Rigging Saw'}
		]
	}
]

I render each object into a card with the items into a list. Essentially, my buttons simply go forward or backward to the next item on the list.

I’ve noticed that testing the Android application, when I click on the navigation buttons, the original list are first appended to list which is active, before it slowly disappears from the bottom. I am unsure why this is happening as I know that I am actively going by each object.

Appreciate any insight on how to resolve this, or whichever tool I might need to learn how to use to try and resolve this.

Thanks to everyone.


#2

For those who may encounter the same issue, I was able to resolve this by adding:

track by item.id

in the HTML declaration.

<div class="list">
   <label ng-repeat="item in itemList.items track by item.id" class="item item-radio">
  </label>
</div>