2016-04-08 11 views
3

Ich habe zwei Filter, wobei der erste Einfluss auf die zweite vor der Abfrage von Daten auf einem Remote-Server hat.Drop-Downs und Versprechungen auswählen - kurz leer wählt

Ich habe eine Auswahl, die ihre Optionen in $scope.locationCodes hat. Diese Auswahl beruht auf einem anderen Dropdown (Kunde). Sobald der Kunde ausgewählt ist, habe ich die ID und übergebe diese dann an das zurückgegebene Versprechen in der ersten Funktion.

Die Frage 1:

Sobald ich einen Kunden wählen, wenn ich (in Codes Drop-Down) wirklich schnell einen Standortcode wählen gehen, werden die Optionen leer sein. Wenn ich verschwimme und dann erneut versuche zu wählen, werden die Optionen angezeigt, was darauf hindeutet, dass es eine kleine Verzögerung gab. Was ist der beste Weg, um diese Verzögerung im Array zu bewerkstelligen?

Der Code:

HTML:

<select data-ng-options="locationCode in locationCodes"></select> 

JS:

$scope.getShipAbbleLocations = function (terminalId) { 
     var customerId = $scope.customer.id; 
     return Service.getShipAbbleLocations(customerId, terminalId).then(function (data) { 
     getLocationCodes(data); 
     _.defer(function() { 
      $scope.$apply(); 
     }) 
     }); 

    }; 



function getLocationCodes(data) { 
      for (var i = 0; i < data.locationCodes.length; i++) { 
      $scope.locationCodes.push(["(" + data.locationCodes[i].shipThruLocationCode + ")", data.locationCodes[i].shipThruLocationId]); 
      } 
      $scope.$apply(); 
     } 

Die Frage 2:

Der Kicker ist, dass die Dropdown-Codes deaktiviert werden, bis ein Kunde ausgewählt ist. Ich habe mich auf einen Timeout in meinem Controller verlassen, um die Deaktivierung zu handhaben, indem ich eine Verzögerung für die 'Freigabe' festlege, die Zeit für das Auffüllen des Arrays erlaubt. Dies funktioniert, aber das Problem tritt wieder auf, sobald Sie den Kunden wechseln und sich nicht mehr um die ursprüngliche Deaktivierung kümmern müssen.

Ich frage mich, ob es einen besseren Weg gibt als Timeouts (die hoffentlich ein besseres Verständnis von angularjs/Versprechungen zeigt), um mit dieser Verzögerung/Asynchronität umzugehen.

+0

Sie könnten einfach eine 'ng-disabled ="! LocationCodes ||! LocationCodes.length "' zur Auswahl hinzufügen. –

+0

Was ist, wenn Sie sich nicht um den anfänglichen Sperrstatus kümmern müssen und Kunden wechseln müssen? Das ursprüngliche Szenario würde immer noch erscheinen – devdropper87

+0

Also sollte es nur deaktiviert werden, wenn Kunden geändert wird? –

Antwort

1

Der beste Weg ist, LOADER anzuzeigen und die Benutzeroberfläche zu deaktivieren, bis Ihr AJAX-Aufruf abgeschlossen ist.

Es ist immer eine bessere Praxis Loader für asynchrone Ajax-Aufrufe zu implementieren.

Sie können den Loader-Code in Interceptors implementieren, so dass für jede Anfrage der Loader angezeigt wird und Sie nicht für jeden AJAX-Aufruf implementieren müssen, da er im Interceptor ist.