set tab indexes for ng-repeated tabs and other divs

Question

I have a requirement in my project. I am having tabs loaded in a scope variable from a HTTP call depending upon the logged in user:

Suppose for User1 data:

$scope.tabObject = [{  
     "tabid": "1",
     "tabname": "tab1" }, {  
     "tabid": "2",
     "tabname": "tab2" }];

Suppose for User2 data:

$scope.tabObject = [{  
     "tabid": "1",
     "tabname": "tab1" }, {  
     "tabid": "2",
     "tabname": "tab2" },{  
     "tabid": "3",
     "tabname": "tab3" }, {  
     "tabid": "4",
     "tabname": "tab4" }];  

In addition to these N number of tabs (using angular ng-repeat) there are some other divs as well. Users will see the page as follows:

User2 Screen:
tab1 tab2 tab3 tab4 logout(button)
panel1 panel1
panel2 panel2
*suppose here tab2 is selected by default

The User2 is on the tab2 after loading the page, so when the user presses tab key from keyboard we need to focus to the next tab3, tab4 then logout button then to the panels depending upon the selected tab. And if I press shift+tab then need to focus backward.

I am trying to do this with the tabindex but have been unsuccessful. How can I get the tab order to work?

Answer 1

Changing focus for an html element doesn't mean that it will be activated or clicked in the manner you expect it.

You can force the action in your own javascript code if you bind to onfocus event. In angular you can use ng-focus directive to perform required action. In this case when pressing tab and focusing tab1, tab2 expression (you will definitely define a function call there) will be called. For example if you have defined states in yout app you can do like <a ng-focus="$state.go('tab2')"> Tab2 </a>