Angularjs vervollständigen von $ http
Ich versuche zu schreiben, eine AutoVervollständigen-Richtlinie, die holt sich die Daten vom server mit einem $http-request (ohne Verwendung externer plugins oder Skripte). Derzeit funktioniert es nur mit statischen Daten. Jetzt weiß ich, dass ich das einfügen muss my $http-Anforderung in der source:
der Richtlinie, aber ich kann nicht finden, eine gute Dokumentation zu dem Thema.
http-request
$http.post($scope.url, { "command": "list category() names"}).
success(function(data, status) {
$scope.status = status;
$scope.names = data;
})
.
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
Richtlinie
app.directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
});
Ansicht
<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">
So, wie ich Stück alle zusammen korrekt die Winkelgeschwindigkeit Weg?
Kommentar zu dem Problem
Sie können den vollständigen Beispiel-source-code? Ich möchte nur wissen, zu welchem Zeitpunkt Sie tatsächlich den HTTP-Aufruf. Vielen Dank im Voraus.
haben Sie die Lösung gefunden? ich stehe vor dem gleichen problem, scheint wie $scope.Namen ist leer, wenn die Richtlinie geladen ist, wird der ajax-Aufruf hinter sich gelassen
InformationsquelleAutor der Frage Gidon | 2013-08-27
Du musst angemeldet sein, um einen Kommentar abzugeben.
Machte ich eine AutoVervollständigen-Richtlinie hochgeladen und es auf GitHub. Es sollte auch in der Lage sein zu handhaben, die Daten aus einer HTTP-Anfrage.
Hier ist die demo: http://justgoscha.github.io/allmighty-autocomplete/
Und hier die Dokumentation und Archiv: https://github.com/JustGoscha/allmighty-autocomplete
Also im Grunde Sie haben, um wieder eine
promise
wenn Sie wollen, um Daten von einer HTTP-Anforderung, die aufgelöst wird, wenn die Daten geladen sind. Deshalb Sie haben zu injizieren, die$q
service/Richtlinie/controller, wo Sie Ihre HTTP-Anforderung.Beispiel:
Ich hoffe, das hilft.
InformationsquelleAutor der Antwort JustGoscha
Verwenden angular-ui-bootstrap -typehead.
Hatte es eine große Unterstützung für den $http und verspricht.
Auch, es sind keine JQuery überhaupt, Reine AngularJS.
(Ich habe immer lieber mit vorhandenen Bibliotheken und wenn Sie etwas verpassen zu öffnen ein Problem oder einen pull-request, viel besser, dann erstellen Sie Ihre eigenen wieder)
InformationsquelleAutor der Antwort Urigo
Den Sie schreiben müssen, ist ein controller mit
ng-change
Funktion im Rahmen. Inng-change
Rückruf Sie einen Aufruf von server-und update-Ergänzungen. Hier ist ein stub (ohne$http
da dies ein plunk):HTML
JS
InformationsquelleAutor der Antwort madhead
der einfachste Weg, das zu tun, eckig oder angularjs ohne externe Module oder Richtlinien mit Liste und datalist HTML5. Sie bekommen nur json und Verwendung ng-repeat für die Fütterung der Optionen in der datalist. Die json-Holen Sie es von ajax.
in diesem Beispiel:
dann können Sie Filter hinzufügen, und orderby im ng-reapet
!! Liste und datalist id müssen denselben Namen haben !!
UPDATE : native HTML5 aber carreful mit den browser-Typ und-version.
check it out : https://caniuse.com/#search=datalist.
InformationsquelleAutor der Antwort londox
Fand ich diese link hilfreich
InformationsquelleAutor der Antwort Joe B