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.
$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; });
app.directive('autoComplete', function($timeout) { return function(scope, iElement, iAttrs) { iElement.autocomplete({ source: scope[iAttrs.uiItems], select: function() { $timeout(function() { iElement.trigger('input'); }, 0); } }); }; });
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:
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; }); };