如何判断在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];
};

这是一个工作的小伙伴