webentwicklung-frage-antwort-db.com.de

Feststellen, welche bootstrap Registerkarte in Angular-UI ausgewählt ist

Gibt es eine Möglichkeit zu bestimmen, welche Registerkarte ausgewählt wurde, wenn die Registerkarten Bootstrap in Angular UI verwendet wurden?

Ich habe versucht, das Fenster-Array zu beobachten, aber es scheint beim Wechseln des Registers nicht aktualisiert zu werden. Kann man eine Rückruffunktion angeben, wenn eine Registerkarte ausgewählt wird?

Update mit Codebeispiel.

Der Code folgt weitgehend dem Beispiel auf der Seite Angular UI bootstrap.

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>

Regler:

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

Eigentlich ist das ganz einfach, da jedes pane das active -Attribut verfügbar macht, das die bidirektionale Datenbindung unterstützt:

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

und dann kann leicht ein aktiver Reiter gefunden werden, zum Beispiel:

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

Hier ist ein funktionierendes plunk

24

wenn Sie keinen Repeater haben, binden Sie die Aktivität von Tabs (oder Spans) an ein Array

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

und in Ihrem Controller

$scope.tabActivity=[false,false];

dann kannst du mit aktiv werden

$scope.tabActivity.indexOf(true)
13
alban maillere

Ich löste es, indem ich eine Methode (onTabSelect) auf dem Controller hinzufügte und sie über das Ereignis ng-click von Tab aufrief. Die folgende Lösung hat für mich funktioniert, bitte siehe dies in Aktion

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

Meine Antwort ist für den Fall, dass Sie die Registerkarte manuell platzieren und die Boostrap-Bibliothek angular ui verwenden, können Sie das Attribut select verwenden

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

in der Funktion showTab, die das Attribut select übergibt, können Sie überprüfen, ob Ihr Tab wie in meinem Fall anhand seines Namens ausgewählt ist.

Das vollständige Beispiel ist hier von angular ui, beachte das select:

3
Tho Vo

Die akzeptierte Antwort funktioniert nur für dynamische Registerkarten.

Bei statischen Registerkarten können Sie das Attribut active der Direktive uib-tabset Auf eine Bereichseigenschaft setzen und mit dem Registerindex vergleichen, um die aktive Registerkarte zu finden.

Im folgenden Code setze ich zum Beispiel eine Klasse in der Kopfzeile eines aktiven Tabs (ich kann die von ui.bootstrap hinzugefügte Klasse active verwenden und das gleiche Ergebnis erzielen, ich tue dies als Beispiel):

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>
2
T J