从$ resource自动完成Angularjs

时间:2015-02-19 09:38:01

标签: javascript angularjs autocomplete angular-resource

我遇到了自动完成和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();
            }
        });
};

1 个答案:

答案 0 :(得分:1)

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

只需将ng-model-options="{ debounce: 500 }"附加到您的输入,模型将在最后一次更改后0.5秒更新。如果触发器是ng-change指令,它将限制查询量。 不要犹豫使用ng-minlengthng-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;
        });

}

此外,我强烈建议您将代码逻辑存储到工厂和/或服务中。