2016-04-14 4 views
1

Ich lade einige Daten von einem Rest-Service ab und verwende sie, um die Optionen in einer Auswahl mit AngularJS aufzufüllen.Chrome: Hinzufügen von Optionen zu einer Auswahl, nachdem der Benutzer sie geöffnet hat

Wenn der Benutzer die Auswahl öffnet, nachdem die Daten abgerufen wurden, gibt es kein Problem.

Wenn der Benutzer die Auswahl öffnet, bevor die Daten abgerufen werden, und sie geöffnet bleibt, bis die Optionen ausgefüllt sind, ändert Chrome nicht die Liste der Optionen und zeigt nur eine Bildlaufleiste mit einer Höhe von einer Zeile. Dies ist für den Benutzer nicht bequem und irreführend.

Gibt es eine Möglichkeit, dies in Chrome zu beheben? Ich merke, dass ich die Auswahl deaktiviert oder versteckt halten kann, bis ich die Optionen bevölkere, aber ich möchte wissen, ob es eine andere Alternative gibt.

Html (die Schaltfläche simuliert den Anruf zu einem Rest-Dienst):

<div ng-controller="MyCtrl"> 
    <button type="button" ng-click="clickButton()">Add options 
    </button> 
    <select ng-model="value" style="width: 200px;" 
    ng-options="o.id as o.label for o in list" 
    ><option value=""></option></select> 
    {{value}} 
</div> 

Javascript:

function MyCtrl($scope, $timeout) { 
    $scope.list = []; 
    function addToList() { 
     $scope.list = [{ 
      "id" : 1, 
      "label" : "One" 
      }, { 
      "id" : 2, 
      "label" : "Two" 
      }, { 
      "id" : 3, 
      "label" : "Three" 
      } 
     ]; 
    } 
    $scope.clickButton = function() { 
     $timeout(function() { 
     addToList(); 
     }, 5000); 
    }; 
} 

In jsFiddle: http://jsfiddle.net/PabloMG/u3fz9be0/

+0

Ich denke, Ihre beste Wette eine Bedingung Ihre Auswahleingang hinzuzufügen wäre: