Dynamically controlled tab

[phuongnd08]

We need a way to show/hide tab dynamically, for example: if a user not logged in, only show 2 tabs. If he/she logged in, show 3 tabs.
Please see to this for a brief discussion: http://forum.ionicframework.com/t/show-hide-ionic-tab-based-on-angular-variable-cause-error-in-background/1563/7

[ajoslin]

Hey @phuongnd08,

Use ng-if instead of ng-show: http://codepen.io/ajoslin/pen/hugIn (try toggling the switch on there).

ng-if works because it completely adds/removes the tab from the DOM depending on the condition instead of just hiding/showing it. This will make sure it properly does everything it needs to do with adding/removing it.

[phuongnd08]

ng-if cause cancel animation error, as I have stated in the forum:

TypeError: Cannot call method 'querySelectorAll' of undefined
at cancelChildAnimations (http://localhost:5000/lib/js/angular/angular-animate.js:878:22)
at Object.leave (http://localhost:5000/lib/js/angular/angular-animate.js:442:11)
at Object.ngIfWatchAction [as fn] (http://localhost:5000/lib/js/angular/angular.js:18503:24)
at Scope.$digest (http://localhost:5000/lib/js/angular/angular.js:11830:29)
at Scope.$apply (http://localhost:5000/lib/js/angular/angular.js:12083:24)
at HTMLAnchorElement.<anonymous> (http://localhost:5000/lib/js/ionic-angular.js:2851:15)
at http://localhost:5000/lib/js/angular/angular.js:2616:10
at forEach (http://localhost:5000/lib/js/angular/angular.js:310:20)
at HTMLAnchorElement.eventHandler (http://localhost:5000/lib/js/angular/angular.js:2615:5)
at Object.ionic.tapElement (http://localhost:5000/lib/js/ionic.js:2114:9) angular.js:9435

[ajoslin]

That error was actually fixed in angular 1.2.14: angular/angular.js@c914cd9.

But unfortunately 1.2.14 has a regression that won't let us upgrade! angular/angular.js#6542

For now, I think the error is 'harmless', and we will upgrade as soon as angular 1.2.15 is pushed out.

[phuongnd08]

Awesome. Thanks. Waiting for the new fix :)

[hebabil]

ajoslin, thanks for the hint. You guys are doing an awesome work !

[rickyk586]

If you have ng-if on one tab, it moves the tab to the end of the rest of the tabs. A quick fix it to put ng-if="true" on the rest of the tabs.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.