angularjs - app - ng-init

Cómo saber qué pestaña de arranque está seleccionada en Angular-UI

Question

¿Hay alguna manera de saber qué pestaña se ha seleccionado al usar las pestañas Bootstrap en la interfaz de usuario angular ?

Intenté ver la matriz de paneles, pero parece que no se actualizó al cambiar de pestaña. ¿Se puede especificar una función de devolución de llamada cuando se selecciona una pestaña?

Actualización con código ejemplo.

El código sigue en gran medida el ejemplo de la página de arranque UI angular.

Margen:

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

Controlador:

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

Answer 1

En realidad, esto es realmente simple ya que cada pane expone el atributo active que admite el enlace de datos bidireccional:

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

y luego se puede encontrar fácilmente una pestaña activa, por ejemplo:

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

Aquí hay un plunk trabajo

Answer 2

La respuesta aceptada solo funciona para pestañas dinámicas.

Para pestañas estáticas, puede establecer el atributo active de la directiva uib-tabset en una propiedad de ámbito y compararlo con el índice de pestañas para buscar la pestaña activa.

Por ejemplo, en el siguiente código lo estoy haciendo para establecer una clase en el encabezado de pestañas activas (puedo usar la clase active agregada por ui.bootstrap y lograr el mismo resultado, lo hago como ejemplo):

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>

Answer 3

Lo resolví agregando un método (onTabSelect) en el controlador y llamándolo desde el evento ng-click de Tab. Debajo de la solución funcionó para mí, por favor mira esto en acción

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

Mi respuesta es que si coloca manualmente la pestaña y está utilizando la biblioteca angular ui boostrap, podría usar el atributo de 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>

en la función showTab que pasa en el atributo de select , puede verificar si su pestaña está seleccionada por su nombre, como en mi caso.

El ejemplo completo está here desde ui angular, observe la select :

Answer 5

si no tiene un repetidor, enlace la actividad de pestañas (o cruces) a una matriz

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

y en tu controlador

$scope.tabActivity=[false,false];

entonces puedes obtener una pestaña activa con

$scope.tabActivity.indexOf(true)