ngTagsInputフィルタ付きオートコンプリート

自動入力でタグ入力フィールドを作成しようとしています。ここでは角度コードは次のとおりです。ngTagsInputフィルタ付きオートコンプリート

var app = angular.module('plunker', ['ngTagsInput']); 

      app.controller('MainCtrl', function($scope, $http) { 
       $scope.loadTags = function(query) { 
       return $http.get(Routing.generate('my_route_to_json_data')); 
       } 
      });

HTMLコード：

<body ng-app="plunker" ng-controller="MainCtrl"> 
     <tags-input ng-model="tags" add-on-paste="true" display-property="categoryname" placeholder="Add a Tag"> 
      <auto-complete max-results-to-show="4" min-length="0" source="loadTags($query)"></auto-complete> 
     </tags-input> 
    <p>Model: {{tags}}</p> 
    </body>

$http.get(Routing.generate('my_route_to_json_data'));戻りtags.json：

[{"categoryname":"wifi"},{"categoryname":"cable"},{"categoryname":"tv"},{"categoryname":"geyser"},{"categoryname":"fridge"},{"categoryname":"sofa"},{"categoryname":"lift"},{"categoryname":"gas stove"},{"categoryname":"washing machine"}]

これはperfecltyに動作します。フィールドに入力を入力すると、ドロップダウンに候補が表示されます。

問題：ユーザーの入力に基づいて、表示されている候補がフィルタされるようにしたい。そのために

私はこれに私の角度のコードを変更：。

var app = angular.module('plunker', ['ngTagsInput']); 

    app.controller('MainCtrl', function($scope, tags) { 

      $scope.loadTags = function(query) { 
      return tags.load(); 
      }; 
    }); 

    app.service('tags', function($q, $http, $filter) { 
    var tags = $http.get(Routing.generate('my_route_to_json_data')); 

    this.load = function(query) { 
     var deferred = $q.defer(); 
     deferred.resolve($filter('filter')($scope.tags, query)); 
     return deferred.promise; 
    }; 
    });

は、任意およびすべてのヘルプは高く評価され:(

を動作しません

ここでは、コンソールです：

出典

2016-07-06 utkarsh2k2

エラーが発生していますか？あなたは '$'サービスを 'tags'サービスに注入していません。 –

@タルンフィードバックのおかげで、私は編集しました。それでも動作しない – utkarsh2k2

この行には '$ scope'とは何か ' '' javascript deferred.resolve（$ filter（ 'filter'）（$ scope.tags、query）））; '' ' –

サービスを次のように変更します：

app.service('tags', function($q, $http, $filter) { 
    this.load = function(query) { 
     return $http.get(Routing.generate('my_route_to_json_data')).then(
      function(result) { 
       return $filter('filter')(result.data, query) 
      } 
     ) 
    }; 
});

サービスは現在、連鎖約束を返し、解決機能はフィルタを処理しています。

結果をキャッシュし、以前にサーバーから返されたタグの配列を再配置する約束（$qサービスを使用）を返すことができます。

フィルタ自体が機能しているかどうかわかりませんが、今はフィルターする項目のリストがあり、undefinedの値（$scope.tags）ではありません。

出典

2016-07-06 07:11:05

答えはありがたいですが、サービスは機能しますが、フィルターは機能しません。 – utkarsh2k2

私は行かなければなりませんが、数時間後にフィルターの問題を再調査します。 –

それを感謝:) – utkarsh2k2

ngTagsInputフィルタ付きオートコンプリート

答えて

関連する問題