web-dev-qa-db-ja.com

$ httpからのAngularjsオートコンプリート

$ httpリクエストを使用してサーバーからデータを取得するオートコンプリートディレクティブを記述しようとしています（外部プラグインまたはスクリプトを使用せずに）。現在、静的データでのみ機能します。これで、ディレクティブのsource:に$ httpリクエストを挿入する必要があることがわかりましたが、この件に関する適切なドキュメントが見つかりません。

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

見る

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

それで、Angularの方法でこれを正しくまとめるにはどうすればいいですか？

angularjsautocompletedirectiveangular-http
60
Gidon

オートコンプリートディレクティブを作成し、GitHubにアップロードしました。また、HTTPリクエストからのデータを処理できる必要があります。

ここにデモがあります： http://justgoscha.github.io/allmighty-autocomplete/ そしてここにドキュメントとリポジトリ： https://github.com/JustGoscha/allmighty-autocomplete

したがって、基本的には、HTTP要求からデータを取得する場合はpromiseを返す必要があり、データがロードされると解決されます。したがって、HTTPリクエストを発行する$qservice/directive/controllerを挿入する必要があります。

例：

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

これがお役に立てば幸いです。

44
JustGoscha

Angle-ui-bootstrapの typehead を使用します。

$ httpとpromiseに対する優れたサポートがありました。また、JQueryはまったく含まれていません。純粋なAngularJSです。

（私は常に既存のライブラリを使用することを好み、それらが問題を開いたりリクエストをプルするために何かが欠けている場合は、あなた自身のものを再度作成するよりもはるかに良いです）

36
Urigo

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

外部モジュールまたはディレクティブなしでangularまたはangularjsでこれを行う最も簡単な方法は、リストおよびデータリストHTML5を使用することです。 jsonを取得し、ng-repeatを使用してデータリストのオプションを入力します。あなたがajaxからそれを取得できるjson。

この例では：

  • ctrl.queryは、入力時に入力するクエリです。
  • ctrl.msgは、プレースホルダーに表示されているメッセージです
  • ctrl.dataListはフェッチされたJSONです

次に、ng-reapetにフィルターとorderbyを追加できます

!!リストとデータリストIDは同じ名前でなければなりません!!

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

更新：ネイティブHTML5ですが、ブラウザとバージョンの種類に注意してください。それをチェックしてください： https://caniuse.com/#search=datalist 。

5
londox

this リンクが役に立ちました

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