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

Posted 2023-02-19

【中文标题】如何判断在 Angular-UI 中选择了哪个引导选项卡

【英文标题】：How to tell which bootstrap tab is selected in Angular-UI

【发布时间】：2013-03-19 02:22:24

【问题描述】：

在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" 
  ];
;

【问题讨论】：

如果您能检查一下我的回答是否对您有用，如果没有，请在github.com/angular-ui/bootstrap 中打开一个问题，并提出您希望它如何工作的建议！

你把我引向了正确的方向。我想在选择某个选项卡时运行一些代码，我想出了这个解决方案：plnkr.co/edit/zctmee

【参考方案1】：

其实这很简单，因为每个pane 都暴露了支持2-way 数据绑定的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];
;

这是一个有效的plunk

【讨论】：

感谢@pkozlowski.opensource。这帮助很大。它绝对应该包含在 Angular UI 中 Bootstrap 选项卡上的示例/文档中。

如果您手动设置选项卡窗格而不使用中继器会怎样？

@pkozlowski.opensource 知道不使用中继器时如何获取活动标签吗？

这不再适用于最新的 angular-bootstrap (2.3.0)

【参考方案2】：

如果您没有中继器，请将选项卡（或跨度）活动绑定到数组

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

在你的控制器中

$scope.tabActivity=[false,false];

然后你可以得到活动标签

$scope.tabActivity.indexOf(true)

【讨论】：

如果您只想检查是否选择了一个选项卡，请将选项卡的活动属性绑定到模型属性，然后使用此属性确定页面上的其他行为。

为了更好的可读性，您可以使用对象而不是数组和对象道具而不是索引。例如， $activeTabs = people : true, projects : false, 并检查 smthng like ng-show="activeTabs.people"

【参考方案3】：

我通过在控制器上添加一个方法（onTabSelect）并从 Tab 的 ng-click 事件调用它来解决它。 下面的解决方案对我有用，请see this in action

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>

【参考方案4】：

我的答案是，如果您手动放置选项卡并且您正在使用 angular ui boostrap 库，您可以使用 select 属性

<uib-tabset class="main-nav">
  <uib-tab select="showTab('a')">
    <uib-tab-heading>a</uib-tab-heading>
    <div class="tab-content"> <span>a</span></div>
  </uib-tab>
  <uib-tab select="showTab('b')">
    <uib-tab-heading>b</uib-tab-heading>
    <div class="tab-content"> <span>b</span></div>
  </uib-tab>
</uib-tabset>

在传递select 属性的showTab 函数中，您可以检查您的选项卡是否像我的情况一样按其名称选择。

完整示例是来自 Angular ui 的 here，请注意 select：

【参考方案5】：

接受的答案仅适用于动态标签。

对于静态选项卡，您可以将uib-tabset 指令的active 属性设置为范围属性，并将其与选项卡索引进行比较以找到活动选项卡。

例如，在下面的代码中，我这样做是为了在活动选项卡标题上设置一个类（我可以使用 ui.bootstrap 添加的active 类并达到相同的结果，我这样做是为了示例）：

angular.module('test', ['ngAnimate', 'ui.bootstrap']);

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");
 .test 
  background: dodgerblue;

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>

<div ng-app="test">
  <uib-tabset active="active">
    <uib-tab index="0">
      <uib-tab-heading ng-class="test:active==0">Static title1</uib-tab-heading>Static content1
    </uib-tab>
    <uib-tab index="1">
      <uib-tab-heading ng-class="test:active==1">Static title1</uib-tab-heading>Static content2</uib-tab>
    <uib-tab index="2">
      <uib-tab-heading ng-class="test:active==2">Static title1</uib-tab-heading>Static content3</uib-tab>
  </uib-tabset>
</div>