Angularjs autocomplete de $ http

Estou tentando escrever uma diretiva de autocomplete que busca dados do servidor usando uma solicitação $ http (sem usar plug-ins ou scripts externos) . Atualmente funciona apenas com dados estáticos. Agora, eu sei que preciso inserir minha solicitação $ http na source: da diretiva, mas não consigo encontrar nenhuma boa documentação sobre o assunto.

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

Visão

  

Então, como faço para juntar tudo isso corretamente no modo Angular?

Fiz uma diretiva de preenchimento automático e enviei-a para o GitHub. Ele também deve ser capaz de manipular dados de uma solicitação HTTP.

Aqui está a demonstração: http://justgoscha.github.io/allmighty-autocomplete/ E aqui a documentação e o repository: https://github.com/JustGoscha/allmighty-autocomplete

Então, basicamente, você precisa retornar uma promise quando quiser obter dados de uma solicitação HTTP, que é resolvida quando os dados são carregados. Portanto, você deve injetar o serviço / diretiva / controlador $q que você emite sua solicitação HTTP.

Exemplo:

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

Eu espero que isso ajude.

Use o header do angular-ui-bootstrap.

Teve grande apoio para $ http e promises. Além disso, não inclui nenhum JQuery, o AngularJS puro.

(Eu sempre prefiro usar bibliotecas existentes e se elas estão faltando alguma coisa para abrir um problema ou puxar uma solicitação, muito melhor do que criar sua própria biblioteca novamente)

Você precisa escrever um controlador com ng-change function ng-change no escopo. No retorno de chamada do ng-change você faz uma chamada ao servidor e atualiza as conclusões. Aqui está um esboço (sem $http pois isso é um 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); } } } 

a maneira mais fácil de fazer isso em angular ou angularjs sem módulos externos ou diretivas é usar lista e datalista HTML5. Você acabou de obter um json e usar ng-repeat para alimentar as opções no datalist. O json você pode buscá-lo a partir de ajax.

neste exemplo:

  • ctrl.query é a consulta que você insere ao digitar.
  • ctrl.msg é a mensagem que está sendo mostrada no espaço reservado
  • ctrl.dataList é o json buscado

então você pode adicionar filtros e orderby no ng-reapet

!! list e datalist id devem ter o mesmo nome !!

    

Eu achei este link útil

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