gpt4 book ai didi

javascript - 具有过滤自动完成功能的 ngTagsInput

转载 作者:行者123 更新时间:2023-11-27 22:48:52 26 4
gpt4 key购买 nike

我正在尝试创建一个带有自动完成功能的标签输入字段。这是 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 代码:

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

不起作用:(

感谢任何和所有帮助。

这是控制台: enter image description here

最佳答案

我会将服务更改为:

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

服务现在返回一个链式 promise ,并且解析函数正在处理过滤器。

您可以缓存结果,并返回一个 promise (使用 $q 服务),该 promise 重新审视之前从服务器返回的标签数组。

不知道过滤器本身是否正常工作 - 但现在它将有要过滤的项目列表,而不是未定义值($scope.tags)。

关于javascript - 具有过滤自动完成功能的 ngTagsInput,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38217709/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com