Автозаполнение Angularjs из $http

Question

Автозаполнение Angularjs из $http

Я пытаюсь написать директиву автозаполнения, которая извлекает данные с сервера с помощью запроса $http (без использования каких-либо внешних плагинов или скриптов). В настоящее время он работает только со статическими данными. Теперь я знаю, что мне нужно вставить мой $http-запрос в source: директивы, но я не могу найти любую хорошую документацию по этому вопросу.

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;   

            });

директива

app.directive('autoComplete', function($timeout) {

    return function(scope, iElement, iAttrs) {

            iElement.autocomplete({

                source: scope[iAttrs.uiItems],

                select: function() {

                    $timeout(function() {

                      iElement.trigger('input');

                    }, 0);

                }

            });

        };

    });

View

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

так, как правильно ли я соединяю все это вместе угловым способом?

666 5

angularjs autocomplete directive

5 ответов:

Comments

Ничего не найдено.

JustGoscha · Accepted Answer · 2013-12-19 19:00:09

Я сделал директиву автозаполнения и загрузил ее в GitHub. Он также должен иметь возможность обрабатывать данные из HTTP-запроса.

вот демо:http://justgoscha.github.io/allmighty-autocomplete/ А вот документация и репозиторий:https://github.com/JustGoscha/allmighty-autocomplete

Так что в основном вы должны вернуть promise Если вы хотите получить данные из HTTP-запроса, который будет разрешен при загрузке данных. Поэтому вы должны ввести $qservice / directive / controller, где вы выполняете свой HTTP-запрос.

пример:
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;
}
Я надеюсь, что это помогает.

Urigo · Accepted Answer · 2014-04-23 01:40:40

используйте angular-ui-bootstrap typehead.

Он имел большую поддержку для $ http и обещаний. Кроме того, он вообще не включает в себя JQuery, pure AngularJS.

(Я всегда предпочитаю использовать существующие библиотеки, и если им чего-то не хватает, чтобы открыть проблему или вытянуть запрос, гораздо лучше, чем снова создать свой собственный)

madhead · Accepted Answer · 2013-08-27 20:34:39

вам нужно написать контроллер с ng-change функции в области. В ng-change обратный вызов Вы делаете вызов на сервер и обновления завершения. вот окурок (без $http как это бухнуть):

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

londox · Accepted Answer · 2017-09-04 18:04:23

самый простой способ сделать это в angular или angularjs без внешних модулей или директив-использовать list и datalist HTML5. Вы просто получаете json и используете ng-repeat для подачи параметров в datalist. Json вы можете получить его из ajax.

в этом примере:

ctrl.запрос-это запрос, который вводится при вводе.

ctrl.msg-это сообщение, которое отображается в заполнителе

ctrl.dataList-это извлеченный json

затем вы можете добавить фильтры и orderby в ng-reapet

!! список и идентификатор datalist должны иметь одно и то же имя !!
 <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: является родным HTML5, но будьте осторожны с браузером типа и версией. проверьте это : https://caniuse.com/#search=datalist.

Joe B · Accepted Answer · 2016-07-12 06:33:50

нашел этой ссылка полезная

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