如何判断哪些引导选项卡角的UI选择 [英] How to tell which bootstrap tab is selected in Angular-UI

问题描述

有没有一种方法来告诉使用引导选项卡时角UI 已选定的选项卡？

我试过看着窗格数组，但它似乎deosn't切换选项卡时要更新。当选择一个标签可以指定一个回调函数？

更新与code的例子。

在code非常遵循从角UI引导页的例子。

标记：

 ＆LT; D​​IV NG控制器=TabsDemoCtrl＆GT;
    ＆LT;＆标签GT;
        ＆LT;面板NG重复=窗格窗格标题={{pane.title}}主动=pane.active＆GT;
            ＆LT; D​​IV NG-包括=pane.template＆GT;＆LT; / DIV＆GT;
        ＆LT; /窗格＆GT;
    ＆LT; /标签＆GT;
＆LT; / DIV＆GT;
 

控制器：

  VAR TabsCtrl =功能（$范围）{
  $ scope.panes = [
    {标题：事件列表，模板：/路径/要/模板/事件}，
    {标题：日历，模板：/路径/要/模板/日历}
  ];
};
 

解决方案

其实这是因为每个面板很简单暴露出有效属性，支持2路数据绑定：

 ＆LT;＆标签GT;
    ＆LT;面板NG重复=窗格窗格标题={{pane.title}}主动=pane.active＆GT;
        {{pane.content}}
    ＆LT; /窗格＆GT;
＆LT; /标签＆GT;
 

，然后主动标签可以很容易找到，例如：

  $ scope.active =功能（）{
    返回$ scope.panes.filter（功能（窗格）{
      返回pane.active;
    }）[0];
};
 

下面是一个工作普拉克： http://plnkr.co/edit/fEvOtL?p=$p $ PVIEW

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: http://plnkr.co/edit/fEvOtL?p=preview

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