Tab Navigation with dynamic pages

CraigWeb

I think you will need to add md-selected="selectedTab" to your <md-tabs> then change the variable selectedTabs to the appropriate integer when clicking on the tab.
https://material.angularjs.org/latest/api/directive/mdTabs

Jonas

@CraigWeb Thank you for your quick answer! I can't make it work. Maybe you can apply it directly to my code example? That would help me a lot!

Jared Wiltshire

@Jonas I'm not following exactly how many pages you have and how they link together.

Craig is saying your ng-click should have something like ng-click="designer.parameters = {Raumnr: 'ZT02O0010_ER003'}; selectedTab = 1"

Jonas

@jared-wiltshire That works if I use and click within the rooms tab-navigation but not if I click from the overview page navigation to a certain room e.g. room 7. It activates room7 but there is always the first tab underlined and it doesn't switch to the room 7 tab.

And this doesn't work:

<md-tab label="Room 7" ui-state="'ui.ztEzrOff02'" ui-state-params="{Raumnr:'ZT02O0070_ER002'}" ng-click="selectedTab = 7"></md-tab>

CraigWeb

Hi Jonas
I don't actually understand how your pages work, not sure if you have purposely left out some code?
I's you page contence outside of the <md-tabs>? and the tabs just being used to display the rooms?

Did you add md-selected="selectedTab" to you details page ?

ThomasEinasto

I think @Jonas is having trouble that if user navigates to some other page besides the tabbed page then variable "selectedtab" is lost because it is only available at that current scope. i.e @Jonas wants to navigate from other page to this tabbed page with automatically specific tab opened, taken into account where user navigated from.

I have solved this easily by using a virtual datapoint in mango to keep the variable "remembered" even if user goes away from that page.

Logic:

Create a virtual datapoint

Bring this point to your pages

Set it to specific number before navigating i.e ng-click = virtualpoint.set(7). Then use @CraigWeb suggestion md-selected="virtualpoint.value" so that page automatically opens the virtual point value tab.

Jared Wiltshire

OK so from what I understand you are transitioning to a new state (ui.ztEzrOff02) and need to set the selected tab based on the state parameters (e.g. if Raumnr is ZT02O0070_ER002 then set current tab to tab 2).

I would put a little chunk like this at the start of the page -

<div style="display: none" ng-init="roomsToTabs = {'ZT02O0070_ER001': 1, 'ZT02O0070_ER002': 2}; page = {selectedTab: roomsToTabs[$state.params.Raumnr]}"></div>

<md-tabs md-selected="page.selectedTab">
<!-- etc -->
</md-tabs>

Alternatively you can get trickier and do this -

<div style="display: none" ng-init="page = {selectedTab: Math.floor($state.params.Raumnr.substr(-3))}"></div>

<md-tabs md-selected="page.selectedTab">
<!-- etc -->
</md-tabs>

Which is basically stripping the last 3 characters (002) and parsing them as an integer. You could add 1 etc if you need to offset this.

Jonas

@jared-wiltshire This works. Thank you!!

For everyone who is interested in another solution: We figured out that putting everything in one page (overview and rooms content) and use ng-show does work as well. Its a bit messy with all the code though.

Thanks again for the fast and great support here!

CraigWeb

Glad you got it working!
I think in your case ng-if would be more appropriate.
https://riptutorial.com/angularjs/example/7754/ng-if-vs-ng-show

Jonas

@craigweb You are right! Thanks!