Angularjs autocompleta desde $ http

Intento escribir una directiva de autocompletar que obtenga datos del servidor utilizando una solicitud de $ http (sin usar ningún plugin o script externo) . Actualmente solo funciona con datos estáticos. Ahora, sé que tengo que insertar mi solicitud de $ http en la source: de la directiva, pero no puedo encontrar ninguna buena documentación sobre el tema.

solicitud de http

 $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; }); 

Directiva

 app.directive('autoComplete', function($timeout) { return function(scope, iElement, iAttrs) { iElement.autocomplete({ source: scope[iAttrs.uiItems], select: function() { $timeout(function() { iElement.trigger('input'); }, 0); } }); }; }); 

Ver

  

Entonces, ¿cómo ensamblo todo esto correctamente de forma angular?

Hice una directiva de autocompletar y la cargué en GitHub. También debería ser capaz de manejar los datos de una solicitud HTTP.

Aquí está la demostración: http://justgoscha.github.io/allmighty-autocomplete/ Y aquí la documentación y el repository: https://github.com/JustGoscha/allmighty-autocomplete

Entonces, básicamente, debe devolver una promise cuando desea obtener datos de una solicitud HTTP, que se resuelve cuando se cargan los datos. Por lo tanto, debe inyectar el servicio / directiva / controlador $q donde emite su solicitud HTTP.

Ejemplo:

 function getMyHttpData(){ var deferred = $q.defer(); $http.jsonp(request).success(function(data){ // the promise gets resolved with the data from HTTP deferred.resolve(data); }); // return the promise return deferred.promise; } 

Espero que esto ayude.

Usa la cabeza de impresora de angular-ui-bootstrap.

Tenía un gran soporte para $ http y promesas. Además, no incluye ningún JQuery en absoluto, AngularJS puro.

(Siempre prefiero usar las bibliotecas existentes y si les falta algo para abrir un problema o una solicitud de extracción, mucho mejor que crear el suyo de nuevo)

Necesita escribir un controlador con la función ng-change en el scope. En la callback de ng-change , realiza una llamada al servidor y actualiza las terminaciones. Aquí hay un stub (sin $http ya que este es un plunk):

HTML

          
Model: {{selected| json}}
{{states}}

JS

 angular.module('plunker', ['ui.bootstrap']); function TypeaheadCtrl($scope) { $scope.selected = undefined; $scope.states = []; $scope.onedit = function(){ $scope.states = []; for(var i = 0; i < Math.floor((Math.random()*10)+1); i++){ var value = ""; for(var j = 0; j < i; j++){ value += j; } $scope.states.push(value); } } } 

la forma más fácil de hacer eso en angular o angularjs sin módulos externos o directivas es usar list y datalist HTML5. Usted acaba de obtener un json y usa ng-repeat para alimentar las opciones en datalist. El json lo puedes traer de ajax.

en este ejemplo:

  • ctrl.query es la consulta que ingresas cuando escribes.
  • ctrl.msg es el mensaje que se muestra en el marcador de posición
  • ctrl.dataList es el json recuperado

luego puedes agregar filtros y ordenar por ng-reapet

!! la lista y la identificación datalist deben tener el mismo nombre !!

    

Encontré este enlace útil

 $scope.loadSkillTags = function (query) { var data = {qData: query}; return SkillService.querySkills(data).then(function(response) { return response.data; }); };