获取活动选项卡的索引

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，用于在午餐页面后显示标签：

我希望在我的js端获取索引：4或3（TabIndex =“{{item.id}}”），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
    });

 });

如果需要，请参阅此fiddle。

Answer 2

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