如何判断在 Angular-UI 中选择了哪个引导选项卡 [英] How to tell which bootstrap tab is selected in Angular-UI

问题描述

在 Angular UI 中使用 Bootstrap 选项卡时，有没有办法判断选择了哪个选项卡?

我尝试观察窗格数组，但在切换选项卡时似乎没有更新.可以指定标签被选中时的回调函数吗?

更新代码示例.

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

标记:

<标签><pane ng-repeat="pane in panes" Heading="{{pane.title}}" active="pane.active"><div ng-include="pane.template"></div></窗格></tabs>

控制器:

var TabsCtrl = function ($scope) {$scope.panes = [{ title:"事件列表", template:"/path/to/template/events" },{ 标题:日历"，模板:/path/to/template/calendar"}];};

解决方案

实际上这很简单，因为每个 pane 都公开了支持 2 路数据绑定的 active 属性:

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

然后可以轻松找到活动标签，例如:

$scope.active = function() {返回 $scope.panes.filter(function(pane){返回窗格.active;})[0];};

这是一个有效的 plunk

Is there a way to tell which tab that has been selected when using the Bootstrap tabs in Angular UI?

I tried watching the panes array but it deosn't seem to be updated when switching tab. Can one specify a callback function when a tab is selected?

Update with code example.

The code very much follows the example from the Angular UI bootstrap page.

Markup:

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

Controller:

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

解决方案

Actually this is really simple as each pane exposes the active attribute that supports 2-way data binding:

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

and then an active tab can be easily found, for example:

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

Here is a working plunk

这篇关于如何判断在 Angular-UI 中选择了哪个引导选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！