web-dev-qa-db-fra.com

Angularjs autocomplete à partir de $ http

J'essaie d'écrire une directive autocomplete qui extrait les données du serveur en utilisant une requête $ http (sans utiliser de plug-in externe ni de script) . Actuellement, cela ne fonctionne qu'avec des données statiques. Maintenant, je sais que je dois insérer ma requête $ http dans le source: de la directive, mais je ne trouve aucune bonne documentation sur le sujet.

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

Directif

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

Vue

<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">

Alors, comment puis-je assembler tout cela correctement de la manière angulaire? 

angularjsautocompletedirectiveangular-http
59
Gidon

J'ai fait une directive autocomplete et l'ai téléchargée sur GitHub. Il devrait également être capable de gérer les données d'une requête HTTP.

Voici la démo: http://justgoscha.github.io/allmighty-autocomplete/ .__ Et voici la documentation et le référentiel: https://github.com/JustGoscha/allmighty-autocomplete

Donc, en gros, vous devez renvoyer une promise lorsque vous souhaitez extraire des données d'une requête HTTP, qui sont résolues lors du chargement des données. Par conséquent, vous devez injecter le $qservice/directive/controller où vous émettez votre requête HTTP.

Exemple: 

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

J'espère que ça aide.

44
JustGoscha

Utilisez typehead pour angular-ui-bootstrap.

Il supporte très bien $ http et les promesses ..__ En outre, il n’inclut pas du tout JQuery, pur AngularJS.

(Je préfère toujours utiliser les bibliothèques existantes et s'il leur manque quelque chose pour ouvrir un problème ou tirer une demande, il est préférable de créer le vôtre à nouveau)

35
Urigo

Vous devez écrire un contrôleur avec la fonction ng-change dans la portée. Dans ng-change callback, vous appelez le serveur et complétez la mise à jour. Voici un stub (sans $http car il s'agit d'un plunk):

HTML

<!doctype html>
<html ng-app="plunker">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
        <script src="example.js"></script>
        <link href="//netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body>
        <div class='container-fluid' ng-controller="TypeaheadCtrl">
            <pre>Model: {{selected| json}}</pre>
            <pre>{{states}}</pre>
            <input type="text" ng-change="onedit()" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
        </div>
    </body>
</html>

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);
    }
  }
}
16
madhead

le moyen le plus simple de le faire dans angular ou angularjs sans modules ou directives externes est d’utiliser HTML5 et listaliste. Vous venez d’obtenir un json et d’utiliser ng-repeat pour alimenter les options de datalist. Le json que vous pouvez aller chercher en ajax.

dans cet exemple:

  • ctrl.query est la requête que vous entrez lorsque vous tapez.
  • ctrl.msg est le message qui s'affiche dans l'espace réservé
  • ctrl.dataList est le json récupéré 

alors vous pouvez ajouter des filtres et orderby dans le ng-reapet

!! La liste et l'identifiant de la dataliste doivent avoir le même nom !!

 <input type="text" list="autocompleList" ng-model="ctrl.query" placeholder={{ctrl.msg}}>
<datalist id="autocompleList">
        <option ng-repeat="Ids in ctrl.dataList value={{Ids}}  >
</datalist>

UPDATE: est natif HTML5 mais soyez prudent avec le navigateur et la version. consultez-le: https://caniuse.com/#search=datalist . 

4
londox

J'ai trouvé this link utile 

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