Как определить, какая вкладка бутстрапа выбрана в Angular -UI

Можно ли указать, какая вкладка была выбрана при использовании вкладок Bootstrap в Angular пользовательском интерфейсе?

Я попытался посмотреть массив панелей, но он не обновляется при переключении вкладок. Можно ли указать функцию обратного вызова при выборе вкладки?

Обновление с помощью примера кода.

Код очень сильно следует за примером из страницы начальной загрузки 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" }
  ];
};

Ответы

Ответ 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];
};

Вот рабочий план: http://plnkr.co/edit/fEvOtL?p=preview

Ответ 2

если у вас нет ретранслятора, привяжите вкладки (или интервалы) к массиву

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

и в вашем контроллере

$scope.tabActivity=[false,false];

тогда вы можете получить активную вкладку с помощью

$scope.tabActivity.indexOf(true)

Ответ 3

Я решил это, добавив один метод (onTabSelect) на контроллер и вызвав его из ng-click события Tab. Ниже решения, работавшего для меня, пожалуйста, см. Это в действии

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>

в функции showTab, проходящей в атрибуте select, вы можете проверить, выбрана ли ваша вкладка по имени, как в моем случае.

Полный пример здесь из angular ui, обратите внимание на select: http://plnkr.co/edit/tc9lZWIz6kjS2WqmITXW?p=preview

Ответ 5

Принятый ответ работает только для динамических вкладок.

Для статических вкладок вы можете установить атрибут active директивы uib-tabset для свойства scope и сравнить его с индексом вкладки, чтобы найти активную вкладку.

Например, в приведенном ниже коде я делаю это, чтобы установить класс в активном заголовке вкладки (я могу использовать класс active, добавленный ui.bootstrap, и достичь того же результата, я делаю это как пример):

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>