Nächste Registerkarte auf "enter" - AngularMaterial

Ich verwende angular-material Tabs in meiner App. Ich muss durch Tabs wechseln md-select dynamisch durch Controller-Funktion. Dies ist mein CodeNächste Registerkarte auf "enter" - AngularMaterial

Ausblick:

<md-tabs md-border-bottom md-selected="selectedIndex"> 
    <md-tab ng-repeat="tab in tabs" label="Label {{$index + 1}}"></md-tab> 
</md-tabs>

Und das ist, wie ich den Wert mit md-select

$scope.changeTab = function(){ 
    $scope.selectedIndex = ($scope.selectedIndex + 1) % $scope.tabs.length; 
}

Jetzt

1. gibt es zwei Fälle modelliert am Wechsel:

Wenn ich crea te eine Schaltfläche wie <button type='button' ng-click='changeTab()'>Button</button>, auf diese Schaltfläche klicken, funktioniert gut und ich kann erfolgreich die Registerkarten klicken bewegen onthis button

Infact ich zum nächsten Reiter verschieben müssen, wenn der Benutzer enter trifft. Also was ich dafür gemacht habe, ist

$document.bind('keypress', function (e) { 
    if (e.which == 13) { 
    $scope.selectedIndex = ($scope.selectedIndex + 1) % $scope.tabs.length; 
    } 
});

Aber das zeigt zufälliges Verhalten. Manchmal bewegt es sich zum nächsten Tab und manchmal nicht. Ich habe verschiedene Arten von Eingabefeldern auf jeder Registerkarte. Hitting Enter funktioniert nur für die Tabs, die input of type text haben. Und für alles andere musste ich irgendwo klicken, nachdem ich Enter gedrückt hatte, dann bewegt es sich zum nächsten Tab. Ich brauche es, um zum nächsten Tab zu wechseln, wenn der Benutzer auf Enter klickt. Was mache ich falsch oder fehlt?

Quelle

2017-11-06 Usman Rana

Sie haben das Problem, dass Sie den Registerkartenindex außerhalb von angular $ digest cicle aktualisieren. Um Sie schnell Code zu beheben, wickeln Sie die folgende Zeile innerhalb $timeout() oder $scope.$applyAsync() ... (PLUNKER)

$scope.$applyAsync(function() { 
    $scope.selectedIndex = ($scope.selectedIndex + 1) % $scope.tabs.length; 
});

Option mit ng-keypess Richtlinie über Body-Tag: (PLUNKER NG-KEYPRESS)

HTML:

<body ng-controller="ChipsController as vm" ng-keypress="changeTab($event)"> 
    <md-tabs md-selected="selectedIndex"> 
    <!-- rest of your code -->

JS:

function MainCtrl($scope) { 
    //...  
    $scope.changeTab = function(e) { 
    if (e.keyCode == 13) 
     $scope.selectedIndex = ($scope.selectedIndex + 1) % $scope.tabs.length; 
    }; 
}

Quelle

2017-11-08 02:13:15

Dank :) es funktionierte –

Nächste Registerkarte auf "enter" - AngularMaterial

Antwort

Verwandte Themen