Ng-repeat inside tab


#1

Hey there! I’m creating a view with 2 tabs, each tab has a list inside it. I think it’s a common pattern but the behavior I see is weird. Each time I change the tab and come back to it, the list items are duplicated. I don’t know if my code is wrong or it really exists an issue with ng-repeat directive inside tabs.

<tab title="Accounts">
  <content has-header="true">
    <div class="list">
      <div class="item item-divider">Twitter Accounts</div>
      <a ng-repeat="tw in account.twitter_accounts | twitterAccount" class="item item-thumbnail-left" href="#">
        <img src="{{tw.img}}">
        <h2>@{{tw.screen_name}}</h2>
      </a>
    </div>
  </content>
</tab>

Duplicate ng-if In First Tab
#2

I was getting this issue too and I’m not sure if I solved it correctly or just botched it (but it does what I want it to do). Basically I setup my list using tab.shown broadcast and cleared it all on tab.hidden.

$scope.$on('tab.shown', function() {
  $scope.loading = true; // Hide content and show spinner
  $scope.Items = Items.get(function () {
    $scope.loading = false; // Show content and hide spinner
  });
});

$scope.$on('tab.hidden', function () {
  $scope.Items = []; // Tear down
});

#3

It looks more like a botch. I think this common pattern should be transparent. BTW, thanks for your solution, it works as temporary solution : )


#4

I’m having this same issue as well, where I am have dynamically created tabs that load some text and an array of images and the solution above does not work in my situation. My tab mark up looks like this

<tabs tabs-type="tabs-icon-top" tabs-style="tabs-light">
	<tab title="{{page.id}}" ng-repeat="page in employee.pages" icon-on="icon ion-refresh" icon-off="icon ion-ios7-reload">
<content padding="true" has-header="true" has-footer="true" scroll="false">
			<div class="wrapper">
				<div class="employee">
					<img ng-repeat="img in page.imgs" class="child" ng-src="../pic/{{employee.sku}}/{{page.imgs}}.png" />
				</div>
				<div class="info">{{page.id}}</div>
			</div>
		</content>
	</tab>
</tabs>

I’m not sure what would have to be changed to prevent this or even if the solution about would apply to my situation. Any ideas?


#5

Same problem here. But unfortunately

$scope.$on('tab.shown', function() { console.log('tab.shown Home'); });
$scope.$on('tab.hidden', function() { console.log('tab.hidden Home'); });

This does not get called here. Where is tab.shown documentend? I could not find anything about it. Have i missed something? I put that 2 lines in several controllers but i never see it in the console when i switch the tabs.


#6

I replaced my <ion-list> with <div class="list"> which seems to stop that duplication of the wrapping elements.
But it looks like the whole <ion-content> is duplicated on each tab-switch. I see multiple nested <div class="scroll" style="transform: translate3d(0px, 0px, 0px) scale(1);"> wrappers growing on each tab switch.

EDIT: i’ve found the related issue on that: https://github.com/driftyco/ionic/issues/2951
Weird that the cache config is causing this. When i removed $ionicConfigProvider.views.maxCache(0); it solved my issue.


#7

Still having this issue, even with <div class='list'>: http://codepen.io/anon/pen/vOYzRX


#8

@mhartington @stereohorse did you (or someone else) find a workaround?

Issue reported here: https://github.com/driftyco/ionic/issues/3915