AngularJS typeahead вызывает webapi

Question

Использование AngularJS с C # webapi здесь.

Я создаю элемент управления вводом, когда пользователь начинает набирать его, я хочу использовать typeahead и отображать возвращенные данные.

У меня есть настройказаголовок, как показано ниже:

HTML:

  <input type="text" name="uName" ng-model="uName" autocomplete="off" required class="form-control input-medium" placeholder="Enter user name..."
   typeahead="uName for uName in getUserNames($viewValue)" />

Контроллер:

    $scope.getUserNames = function (search) {
        myService.getUserNamesFromApi(search).then(function (response) {
            $scope.foundNames = [];
            if (response.length > 0) {
                for (var i = 0; i < response.length; i++) {
                    $scope.foundNames.push({ 'uName': response[i].uName });
                }
                return $scope.foundNames;
            }
        });
    };

Данные, возвращаемые из моего API, представляют собой массив, например:

0: {fName: "Adam", lName: "Smith", uName: "asmith123"},
1: {fName: "John", lName: "Bambi", uName: "jbambi456"}

И так далее ...

Я пытаюсь получить часть uName и передать ее в мой массив, а затем я возвращаю этот массив.Но с этим кодом в настоящее время он ничего не показывает, без ошибок.

Что мне здесь не хватает?

Answer 1

Вы пропустили возвращение обещания из функции getUserNames. Вот как typeahead загружает асинхронную коллекцию, как только вы что-то печатаете. А также вернуть $scope.foundNames; извне if условие.

$scope.getUserNames = function (search) {
    // return promise here.
    return myService.getUserNamesFromApi(search).then(function (response) {
        $scope.foundNames = [];
        if (response.length > 0) {
            for (var i = 0; i < response.length; i++) {
                $scope.foundNames.push({ 'uName': response[i].uName });
            }
        }
        // return result from here.
        return $scope.foundNames;
    });
};

Answer 2

должно быть как,

 typeahead="uName as uName.uName for uName in getUserNames($viewValue)" />