angularjs - 获取活动标签的索引

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

这是一个屏幕截图，在页面午餐后显示选项卡：

我想在我的 js 端获取 index: 4 or 3(Ta​​bIndex="{{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
    });

 });

如果需要，请参阅此小提琴。

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