获取活动标签的索引

Question

我想获取JS端活动标签页的索引

这是我的代码：

HTML:

<uib-tabset>
   <uib-tab ng-repeat="item in tabs" active="item.active" TabIndex="{{item.id}}" heading="{{item.name}}"></uib-tab>
</uib-tabset>

JS:

Category.findAll().$promise.then(function (result) {
      $scope.tabs = result;
    });

这是一个屏幕截图，用于在浏览页面后显示选项卡：

我想获取索引：4 或 3(TabIndex="{{item.id}}") 在我的 js 端，onchange 以及页面加载时。

Answer 1

select() - 激活选项卡时调用的可选表达式。支持表达式模板中的 $event。

<uib-tabset>
  <uib-tab ng-repeat="item in tabs" active="item.active" TabIndex="{{item.id}}" heading="{{item.name}}" select="alertMe($event, $index)></uib-tab>
</uib-tabset>

alertMe 是控制器内部的函数

$scope.alertMe = function(e, index) {
   console.log(e, index)
 };

Answer 2

您可以将作用域变量绑定到 uib-tabset 组件的 active 属性：

<uib-tabset active="activeTab">
   <uib-tab ng-repeat="item in tabs" active="item.active" TabIndex="{{item.id}}" heading="{{item.name}}" select="alertMe($event, $index)></uib-tab>
</uib-tabset>

并且在您的控制器中，您可以 select 选项卡或仅收听选项卡更改事件：

Category.findAll().$promise.then(function(result) {
    $scope.tabs = result;
    $scope.activeTab = 1; //set 2nd tab

    $scope.$watch('activeTab', function(newVal) {
       console.log(newVal);   //listen to tab change events
    });

 });

如果需要，请参阅此 fiddle。

获取活动标签的索引

get index of active tab

tabs

angularjs

uib