ui.bootstrap.typeahead:如何将$http与便签结合起来

Question

我想利用ui.bootstrap.typeahead，因为它很好。我正在实现对可能包含数百万用户的数据库的搜索，因此我非常希望能够在调用$http之前在搜索框中取消击键。否则，每一次击键都会导致搜索，而早期的击键会产生比以后的击键更慢的搜索，从而产生笨拙的用户体验。

我目前的努力不起作用，看起来是这样的：

JavaScript:

angular.module("mycontrollers").controller("myCtrl", [
    "$scope", "$http", "rx", "localisationService", "close", function ($scope, $http, rx, localisationService, close) {
        var culture = localisationService.getCulture();
        function getUsersObservable(val) {
            return rx.Observable
                .fromPromise($http.get("/api/" + culture + "/usersearch", { params: { userName: val } }))
                .map(function (response) {
                    return response.data;
                });
        }
        $scope.close = close;
        $scope.$createObservableFunction("getUsers")
            .debounce(400)
            .filter(function (val) {
                return val.length > 0;
            })
            .flatMapLatest(getUsersObservable)
            .subscribe();
    }
]);

HTML:

<div class="form-group">
    <label for="the-user" localised-text-key="TheUser"></label>
    <input type="text" id="the-user" ng-model="userId" uib-typeahead="user for user in getUsers($viewValue)" typeahead-loading="loadingUsers" class="form-control" />
</div>

服务器端：

public async Task<IHttpActionResult> Get(string userName)
{
    var users = await _modelContext.Users.Where(u => u.UserName.Contains(userName)).OrderBy(u => u.UserName).Select(u => u.UserName).Take(20).ToArrayAsync();
    return Ok(users);
}

输入被正确地删除；rx.observable在JavaScript的开头将搜索结果返回为一个字符串数组，并正确地删除输入。我不知道如何将结果打包到一个可以被ui.bootstrap.typeahead正确解释的承诺中。

Answer 1

好吧，我完全错过了

ng-模型-选项$-ng.model选项(见ng-型号-选项指示)。目前支持退欧和getterSetter选项。

所以这个指令允许你把选项附加到它的ng-model上，就像普通的ol的角度一样。

因此，您可以使用它来设置模型值的减值，然后通过ng-change指令调用函数。

<input type="text" id="the-user" 
    ng-model="userId" 
    ng-model-options="{'debounce': 500}" 
    ng-change="sendHttpAfterDebounce()"
    uib-typeahead="user for user in getUsers($viewValue)" typeahead- 
    loading="loadingUsers" 
    class="form-control" />

现在，您的函数(sendHttpAfterDebounce)将在键入完后运行500毫秒。