[Help] How to create a dynamic tabs

ionic-v1
1

Hi All,

I have a question: how to create a dynamic tab

Ex: $scope.categoryTabs= [
{name: tab 1, id:‘tab-1’},
{name: tab 2, id:‘tab-2’},
{name: tab 3, id:‘tab-3’}
…
]

I tried use

<ion-tab ng-repeat="tab in categoryTabs" title="{{tab.name}}" href="#/tab/cate/{{item.id}}">
        <ion-nav-view name="tab-content"></ion-nav-view>
</ion-tab>

but it not working.

Please help me, thank you!

2

code on Codepen: http://codepen.io/hungha/pen/QwZeYJ
I have issue when switch tab
@Calendee , @adam, @mhartington please help!

3

You’re going to have a hard time making this work. The ion-nav-view name being the same on all the dynamic tabs is what’s going to kill you. Right now, without a bunch of hacks in the state change events, this isn’t going to happen.


Basically, you need specifically named views. FYI : those views can also NOT be dynamically named - been there and failed.

4

Hi @Calendee thank you for reply.

$rootScope.$on('$stateChangeSuccess', function() {
  if ($state.matches(tab.href) || $state.matches(tab.uiSref)) {
    select(tab);
  }
});

I am new ui-router, I don’t understand :frowning:

can you share on codepen.io?