Change index von AngularJS md-Tabletten haben überhaupt keine Wirkung

In meinem Angular app, ich habe einen md-Registerkarten, deren md-ausgewählte Richtlinie ist gebunden an eine Eigenschaft in meinem controller. Ich möchte zum wechseln der aktuellen Registerkarte zu der einen, deren index von einer Funktion namens von ng-klicken Sie irgendwo in meinem template.

Habe ich es auf diese Weise:

<div ng-controller="TrackingCtrl" layout-fill>
   <md-content ng-if="isSmart" layout-fill>
      <md-tabs md-selected="selectedIndex" layout-fill>
         <md-tab>.........</md-tab>
         <md-tab>.........</md-tab>
         <md-tab>.........</md-tab>
         <md-tab>
            <md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
            <md-tab-body>
                <md-tab-content layout-fill flex>
                    <button ng-click="map.panTo(getPosition());displayMap();"></button>
            </md-tab-body>
         </md-tab>
    </md-tabs>
 </md-content>
</div>

In meinem controller habe ich :

  $scope.selectedIndex = 0;
  $scope.displayMap = function() {
      $scope.selectedIndex = 1;
  };

Aber es hat überhaupt keine Wirkung wenn ich auf meine Taste, die Anrufe displayMap();

Habe ich überprüft, das problem:

Wenn ich den $scope.selectedIndex = 1; in meinem controller, der Standard-Registerkarte ist der eine, dessen index 1 ist. OK
Wenn ich den md-selected="1" in meinem template, die Standard-tab ist derjenige, dessen index 1 ist. OK
Wenn ich einen Haltepunkt in meinem code, und wenn ich auf meine Schaltfläche, displayMap() aufgerufen wird, und $scope.selectedIndex = 1; ausgeführt wird. OK

Es scheint, funktioniert alles einwandfrei... außer die Registerkarte nicht ändern.

Ich bin mit Winkel-Material 1.0.2

Ich auch benutzt $gelten für "force update" (kein Effekt) :

  $scope.selectedIndex = 0;
  $scope.displayMap = function () {
      $timeout(function () {
          if (!$scope.$$phase) {
              $scope.$apply(function () {
                  $scope.selectedIndex = 1;
              });
          }
      });
  };

FYI - $timeout von selbst löst $gelten intern . Beantwortet nicht die Frage ... nur auf der Durchreise auf info
Schlage vor, check-in-eckig-material github issue-tracker auch. Vielen tabs Probleme gibt
Ja, ich will check this out

InformationsquelleAutor Ben | 2016-01-21

9

Ich bin froh, dass du gefunden eine Lösung für Ihre Problem. Um zu vermeiden, dass Verhalten zunächst sollten Sie wahrscheinlich haben einen Blick auf diese stackoverflow-Diskussion.

Seit Ihr selectedIndex variable hat einen primitiven, jedem neuen Bereich eingeführt - Sie erwähnten bereits die ngIf - zerstört die Daten verbindlich und Veränderungen innerhalb der untergeordneten Bereich wird keine Auswirkung auf die 'außen'.

In Ihrem Fall, verwenden Sie einfach...
```
$scope.vm = {
  selectedIndex: 0
};
```
...zu Folgen die dot Regel.
- Sollte die akzeptierte Antwort. Danke
- Dieser arbeitete nur für mich, sollte die akzeptierte Antwort. Danke!
InformationsquelleAutor Moritz Herbert

Ich mein problem gelöst, das war sicherlich verursacht durch einen scope-Ausgabe. Ich benutzte einfach die controller als syntax, und erklärte, alle bisherigen Umfang Daten mit:

var self = this;
self.selectedIndex = 0;
self.displayMap = function (){
   self.selectedIndex = 1;
};

und mein markup:

<div ng-controller="TrackingCtrl as tracking" layout-fill>
  <md-content ng-if="tracking.isSmart" layout-fill>
    <md-tabs md-selected="tracking.selectedIndex" layout-fill>
       <md-tab>.........</md-tab>
       <md-tab>.........</md-tab>
       <md-tab>.........</md-tab>
       <md-tab>
          <md-tab-label>{{ 'tracking.positions.TITLE' | translate }}</md-tab-label>
          <md-tab-body>
             <md-tab-content layout-fill flex>
                <button ng-click="tracking.displayMap();"></button>
             </md-tab-content>
          </md-tab-body>
       </md-tab>
  </md-tabs>
 </md-content>
</div>

Funktioniert jetzt perfekt. Ich glaube, mein ng-wenn ändern mein scope oder so.

dude... ich danke Ihnen so sehr. Ich habe schon Durcheinander mit dieser ganzen Vormittag. +1

InformationsquelleAutor Ben

2

Ich vielleicht falsch verstanden habe, etwas über Ihre Frage, aber diese sollte funktionieren...

Habe ich einen plunker und ich nicht reproduzieren kann Ihr Verhalten, es funktioniert einfach gut.

Ansicht:
```
<md-tabs class="md-accent" md-selected="selectedIndex">
  <md-tab id="tab1">
    <md-tab-label>Item One</md-tab-label>
    <md-tab-body>
      data.selectedIndex = 0;
    </md-tab-body>
  </md-tab>      
  <md-tab id="tab3">
    <md-tab-label>Item Two</md-tab-label>
    <md-tab-body>
      data.selectedIndex = 1;
    </md-tab-body>
  </md-tab>
</md-tabs>

<md-button ng-click="displayMap()">Map</md-button>
```
Controller:
```
  function AppCtrl ( $scope ) {
    $scope.selectedIndex = 0;

    $scope.displayMap = function() {
      $scope.selectedIndex = 1; 
  };
```
Könnten Sie bitte überprüfen Sie es? Hoffe es hilft

Plunker hier
- Es hat nicht funktioniert, aber ich habe einen workaround gefunden. Siehe meine Antwort
- Um ehrlich zu sein, verstehe ich nicht, warum Sie sagen, es funktioniert nicht...Die plunker meine Antwort ist in Ordnung. Wie auch immer, ich bin froh, dass du das Problem gelöst
- Sorry, es hat nicht funktioniert wenn ich den code in meinem markup (wegen meinen Rahmen denke ich). Natürlich auf Plunker es ist ok
InformationsquelleAutor troig

hier ist meine Lösung:

<div layout="column" flex>
            <md-tabs md-dynamic-height md-border-bottom md-selected="vm.selectedIndex">
                <md-tab label="Genel" md-on-select="vm.selectedIndex = 0">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
                <md-tab label="Sipariş /Planlama" md-on-select="vm.selectedIndex = 1">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
                <md-tab label="Kalite Kontrol Oranları" md-on-select="vm.selectedIndex = 2">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
                <md-tab label="E-Posta" md-on-select="vm.selectedIndex = 3">
                  <div class="md-padding">{{vm.selectedIndex}}</div>
                </md-tab>
            </md-tabs>
        </div>

InformationsquelleAutor anarchist

-1

Mit md-selected = 0 gehen Sie auf die erste Registerkarte. Und md-selected = 1 auf die zweite Registerkarte.

button:
```
<md-button ng-click="displayMap()">Map</md-button> 
```
controller:
```
 $scope.displayMap = function() {
      $scope.selectedIndex = 1; //select second tab
  };
```
- Hmm, ja aber wie kommt es zu lösen mein Problem?
- testen Sie meine vorschlagen? Ich habe gewinkelt material-app 1.0.0 y es funktioniert
- Es hat nicht funktioniert, aber ich habe einen workaround gefunden. Siehe meine Antwort
InformationsquelleAutor Oscar Caicedo

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.