Update Ionic List


#1

I have a problem with Ionic List, when I update the data in the controller, using $scope.apply(), the List gets updated but for a little moment I see the old data, like it is too slow.

Code

Controller:

$scope.items = [
	{title: 'Title 1', content: 'Content 1'},
	{title: 'Title 2', content: 'Content 2'}
];

$scope.test = function(){
	$scope.items = [
		{title: 'Title 3', content: 'Content 3'},
		{title: 'Title 4', content: 'Content 4'}
	];
}

View:

<content has-header="true" has-tabs="true">
    <button ng-click="test()">Test</button>
    <list on-refresh="onRefresh()">
	<item ng-repeat="item in items">
	   <h3>{{item.title}}</h3>
	   <p>{{item.content}}</p>
	</item>
    </list>
 </content>

#2

Hey @daver182, I replied to you on github (https://github.com/driftyco/ionic/issues/236)

But this is related to ngAnimate which tries to animate in the new items and remove the old items.

You can try adding an animation to the list like this: <list class="fade-in-not-out"> or create an empty transition.

As far as I can tell we are using ngAnimate correctly, so I think this is a bug in ngAnimate that needs to be fixed.


#3

Ok, thank you, the solution works, but I dont think this is a normal behavior, I hope somebody fix it.


#4

Can use “track by”, check the answer in http://stackoverflow.com/questions/20509280/angularjs-ng-repeat-array-ajax-how-to-avoid-refreshing-dom-on-each-request


#5

@mulyoved Thanks so much for this. I saw it many days ago and said, “Huh??” Now that I have the same problem, I dug around and found this post again. track by is the exact fix for this problem.


#6

This is indeed a bug that did not resolve with the css suggestions listed in this thread. really strange