Question

我正在尝试使用自动完成创建标签输入字段。这是Angular代码：

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

<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"}]

这是完美的。当我在字段中输入一些输入时，建议会显示在下拉列表中。

问题：现在我希望根据用户输入过滤显示的建议。

为此，我将Angular代码更改为：

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

不能工作:(

感谢任何和所有帮助。

这是控制台：

Answer 1

我会将服务更改为：

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

该服务现在返回一个链式promises，而resolve函数正在处理过滤器。

您可以缓存结果，并返回一个承诺（使用$q服务），该承诺重新启动先前从服务器返回的标记数组。

不知道过滤器本身是否正常工作 - 但现在它将包含要过滤的项目列表，而不是undefined值（$scope.tags）。

带过滤自动完成的ngTagsInput

1 个答案: