Ich verwende die eckige UI-Auswahl.
https://github.com/angular-ui/ui-select
Ich sah mich bei den verfügbaren Demos um dieses plunkr
Ich möchte Daten von einem Remote-Dienst abrufen. Jedes Mal, wenn der Benutzer etwas in das Textfeld eingibt. Ich möchte Daten vom Remotedienst abrufen, wobei die Ergebnisse basierend auf dem Eingabewert gefiltert werden.
Ich habe einen Webdienst geschrieben und der Webdienst funktioniert einwandfrei.
Wie kann ich angle ui select verwenden, um Daten vom Remote-Service abzurufen?
Derzeit folge ich einem einfachen Beispiel aus der Demo
<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
{{color}}
</ui-select-choices>
</ui-select>
availableColors ist ein vordefiniertes Array. Ich möchte das Datenarray nicht vorher definieren.
Ich habe im Internet nach möglichen Dokumentationen oder Tutorials gesucht, aber nichts Nützliches gefunden.
In Ihrem Beispiel müssen Sie zunächst Ihre initialisieren availableColors als leeres Array:
$scope.availableColors = [];
Dann können Sie Ihren einfachen Dienst mit schreiben $http:
$http.get('data.json').then(
function (response) {
$scope.availableColors = response.data;
$scope.multipleDemo.colors = ['Blue','Red'];
},
function (response) {
console.log('ERROR!!!');
}
);
Jetzt können Sie diesen Code verwenden, ohne Ihren vorab zu definieren availableColors durch einige Werte.
In diesem Beispiel habe ich file data.json die eine Reihe von Farben enthält.
Es ist ein sehr einfaches Beispiel, aber ich hoffe, dass es Ihnen helfen wird. Änderungen beginnen ab line 118 im Ordner demo.js.
Bearbeiten
Wenn Sie Ihre Auswahlliste dynamisch aktualisieren möchten, können Sie die Attribute verwenden refresh und refresh-delay des ui-select-choices Richtlinie.
Das erste Attribut erhält, wie Sie sich denken können, eine Funktion wie
refresh="funcAsync($select.search)"
die jedes Mal aufgerufen wird, wenn Sie etwas eingeben. Und Sie können das zweite Attribut als verwenden
refresh-delay="0"
Wie Sie sich vorstellen können, wird es für die festgelegte Anrufverzögerung verwendet refresh Funktion in Millisekunden. Standardmäßig ist dieser Wert auf eingestellt 1000.
Ich habe meinen Plunk aktualisiert, also habe ich mich entschieden, keine eigenen Backend-Funktionen zu schreiben. Deshalb können Sie durch einfaches Eintippen überprüfen, ob es funktioniert red in der ersten ui-select Feld – Werte werden von einem anderen erhalten .json Datei – data1.json.
Hoffe, es wird dir helfen.
Da du gesagt hast:
Ich möchte den Dienst jedes Mal aufrufen, wenn der Benutzer einige Werte in das Eingabefeld eingibt, und der Dienst gibt das gefilterte Ergebnis basierend auf dem im Textfeld eingegebenen Wert zurück.
Ich glaube, Sie sollten $watch den Eingabewert zur Änderung und Abfrage der entfernten Quelle, wenn der Wert geändert wird
