获取活动选项卡的索引

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;
    }); 

这是一个screenShot,用于在午餐页面后显示标签:

我想得到索引:4或3(TabIndex ="{{item.id}}")在我的js一边,onchange,但也在页面加载时.

Answer 1

您可以将范围变量绑定到组件的active属性uib-tabset:

<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>

在您的控制器中,您可以选择选项卡或只是收听标签更改事件:

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
    });

 });

如果需要,请看这个小提琴.