从 $resource 自动完成 Angularjs

Question

我对自动完成和 angularjs 有疑问。我每次输入时都会收到几个 ajax 请求，但这是无法使用的。我尝试使用超时但没有成功。这是代码：

$scope.autoCompleteResults = function(){
        $scope.aborter = $q.defer();

        $scope.resource = $resource(URL, {}, {
            getAutocompleteResults: {
                method: "GET",
                timeout: $scope.aborter.promise
            }
        });

        $scope.resource.getAutocompleteResults({}, function (data) {
            if ($scope.searchTxt.length > 1) {

                $scope.autocompleteViewResults = data.data;
                $scope.aborter.resolve();

            } else {
                $scope.autocompleteViewResults = [];
                $scope.search.aborter.reject();
            }
        });
};

Answer 1

您可以尝试使用 ng-model-options 属性来限制 api 次调用。

只需将 ng-model-options="{ debounce: 500 }" 附加到您的输入，模型将在最后一次更改后仅 0.5 秒更新。如果触发器是 ng-change 指令，它将限制查询的数量。不要犹豫，也可以使用 ng-minlength 和 ng-maxlength

这样的输入指令

此外，当查询已经在进行时，您可以使用布尔值来阻止 api 调用。

你可以这样做。

var Resource = $resource(URL, {},{ getAutocompleteResults: { method: "GET" }});

var locked = false;
function getMoreData() {

    if(locked)
        return;
    locked = true;

    Resource.autoCompleteResults()
        .$promise.then(function(data) {
            $scope.autocompleteViewResults = data;
            locked = false;
        });

}

此外，我强烈建议您将代码逻辑存储到工厂 and/or 服务中。

从 $resource 自动完成 Angularjs

Autocomplete Angularjs from $resource

javascript

autocomplete

angularjs

angular-resource