Compilazione automatica di Angularjs da $ http

Sto cercando di scrivere una direttiva di completamento automatico che recuperi i dati dal server utilizzando una richiesta $ http (senza utilizzare plugin o script esterni) . Attualmente funziona solo con dati statici. Ora, so che ho bisogno di inserire la mia richiesta $ http nella source: della direttiva, ma non riesco a trovare alcuna buona documentazione sull’argomento.

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

Direttiva

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

vista

  

Quindi, come faccio a mettere insieme tutto correttamente il modo angular?

Ho fatto una direttiva di autocompletamento e l’ho caricata su GitHub. Dovrebbe anche essere in grado di gestire i dati da una richiesta HTTP.

Ecco la demo: http://justgoscha.github.io/allmighty-autocomplete/ E qui la documentazione e il repository: https://github.com/JustGoscha/allmighty-autocomplete

Quindi in pratica devi restituire una promise quando vuoi ottenere i dati da una richiesta HTTP, che viene risolta quando i dati vengono caricati. Pertanto è necessario iniettare il servizio / direttiva / controller $q cui si invia la richiesta HTTP.

Esempio:

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

Spero che aiuti.

Utilizzare il tipo di carattere angular-ui-bootstrap.

Ha avuto un grande supporto per $ http e promesse. Inoltre, non include affatto JQuery, puro AngularJS.

(Preferisco sempre utilizzare le librerie esistenti e se mancano qualcosa per aprire un problema o richiamare una richiesta, molto meglio quindi crearne di nuove)

È necessario scrivere un controller con la funzione ng-change in ambito. In callback ng-change si effettua una chiamata al server e si aggiornano i completamenti. Ecco uno stub (senza $http come questo è 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); } } } 

il modo più semplice per farlo in angular o angularjs senza moduli o direttive esterni sta usando list e datalist HTML5. Hai appena ricevuto un errore e usi ng-repeat per alimentare le opzioni nel datalist. Il json puoi prenderlo da ajax.

in questo esempio:

  • ctrl.query è la query che inserisci quando digiti.
  • ctrl.msg è il messaggio che viene mostrato nel segnaposto
  • ctrl.dataList è il json recuperato

quindi puoi aggiungere filtri e ordinare in ng-reapet

!! lista e ID dei dati devono avere lo stesso nome !!

    

Ho trovato questo collegamento utile

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