为 ng 重复的选项卡和其他 div 设置选项卡索引

Question

我的项目中有一个需求。根据登录的用户，我正在通过 HTTP 调用将选项卡加载到范围变量中：

假设 User1 数据：

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

假设 User2 数据：

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

除了这 N 个选项卡（使用角度 ng-repeat）之外，还有其他一些 div。用户将看到如下页面：

用户 2 屏幕：
tab1 tab2 tab3 tab4 注销（按钮）
面板 1 面板 1
面板 2 面板 2
*假设这里tab2默认被选中

加载页面后，User2 位于 tab2 上，因此当用户从键盘按下 tab 键时，我们需要将注意力集中到下一个 tab3、tab4，然后是注销按钮，然后根据所选选项卡转到面板。如果我按 shift+tab 则需要向后聚焦。

我正在尝试使用 tabindex 执行此操作，但没有成功。如何使标签顺序起作用？

Answer 1

更改 html 元素的焦点并不意味着它会以您期望的方式被激活或单击。

如果您绑定到onfocus 事件，您可以在自己的javascript 代码中强制执行该操作。在 Angular 中，您可以使用 ng-focus 指令来执行所需的操作。在这种情况下，当按下 tab 并聚焦 tab1 时，将调用 tab2 表达式（你肯定会在那里定义一个函数调用）。例如，如果你在你的应用中定义了状态，你可以像<a ng-focus="$state.go('tab2')"> Tab2 </a>