如何判断在Angular-UI中选择了哪个引导选项卡

Question

有没有办法告诉Angular UI中使用Bootstrap选项卡时选择了哪个选项卡？

我尝试观看窗格数组,但切换选项卡时似乎没有更新.选择选项卡时,可以指定回调函数吗？

使用代码示例更新.

代码非常遵循Angular UI引导程序页面中的示例.

标记:

<div ng-controller="TabsDemoCtrl">
    <tabs>
        <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">
            <div ng-include="pane.template"></div>
        </pane>
    </tabs>
</div>

控制器:

var TabsCtrl = function ($scope) {
  $scope.panes = [
    { title:"Events list", template:"/path/to/template/events" },
    { title:"Calendar", template:"/path/to/template/calendar" }
  ];
};

Answer 1

实际上这很简单,因为每个都pane暴露了active支持双向数据绑定的属性:

<tabs>
    <pane ng-repeat="pane in panes" heading="{{pane.title}}" active="pane.active">      
        {{pane.content}}
    </pane>
</tabs>

然后可以轻松找到活动选项卡,例如:

$scope.active = function() {
    return $scope.panes.filter(function(pane){
      return pane.active;
    })[0];
};

这是一个工作的插件

Answer 2

如果您没有转发器,请将制表符(或跨接)活动绑定到数组

 <tab active="tabActivity[0]">...</tab>
 <tab active="tabActivity[1]">...</tab>

并在你的控制器

$scope.tabActivity=[false,false];

然后你可以使用活动标签

$scope.tabActivity.indexOf(true)

Answer 3

我通过在控制器上添加一个方法(onTabSelect)并从Tab的ng-click事件中调用它来解决它.以下解决方案对我有用,请看这个在行动

function myTabController($scope) {
  $scope.onTabSelect = function(tabName) {
    $scope.selectedTabName = tabName;
    console.log("Changed tab to " + tabName);
  }


  <tabset>
    <tab ng-click="onTabSelect('A')">
      <tab-heading>
        A
      </tab-heading>
    </tab>
    <tab ng-click="onTabSelect('B')">
      <tab-heading>
        B
      </tab-heading>
    </tab>
  </tabset>