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

Question

Есть ли способ узнать, какая вкладка была выбрана при использовании вкладок Bootstrap в Angular UI?

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

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

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

Вот рабочий панк

Answer 2

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

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

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

$scope.tabActivity=[false,false];

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

$scope.tabActivity.indexOf(true)

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

Answer 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 атрибут, вы можете проверить, выбрана ли ваша вкладка по имени, как в моем случае.

Полный пример здесь от углового интерфейса, обратите внимание на select:

Answer 5

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

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

Например, в приведенном ниже коде я делаю так, чтобы установить класс в заголовке активной вкладки (я могу использовать 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>