javascript — угловой тип начальной загрузки с асинхронной загрузкой — один символ позади

Question

javascript — угловой тип начальной загрузки с асинхронной загрузкой — один символ позади

Я реализовал следующий код typeahead в директиве.

Вот HTML-код:

<div>
<input type="text"ng-model="company"uib-typeahead="company as company.name for company in companyByName($viewValue)"typeahead-loading="loadingCompanies"typeahead-no-results="noCompanyResults"class="form-control">
<i ng-show="loadingCompanies" class="glyphicon glyphicon-refresh"></i>
<div ng-show="noCompanyResults">
<i class="glyphicon glyphicon-remove"></i> No Results Found
</div>
</div>

Вот JavaScript:

  scope.companyByName = function() {
var companyName = scope.company.name ? scope.company.name : scope.company;
var searchTerms = {name: companyName, startRow: 0, endRow: 20};

return $http.post("backend/get/companies.php", searchTerms).then((result) => {
$log.info("Companies", result.data.results);
return result.data.results;
});
};

Код PHP backend/get/companies.php принимает строку поиска и возвращает массив объектов с id а также name атрибуты с именами, которые содержат эту строку поиска.

Вот поведение, которое я испытываю:

Когда я набираю один символ «f» в поле typeahead, значение companyName передан в бэкэнд-скрипт «» (пустая строка). backend/get/companies.php возвращает все результаты.

Когда я набираю второй символ «fo» в поле typeahead, значение companyName передан в бэкэнд-скрипт «f». backend/get/companies.php возвращает результаты, которые соответствуют «F».

Ввод третьего символа «foo» возвращает результаты, соответствующие «fo» и т. Д.

Я смоделировал мой код после официальные примеры. Что здесь происходит? Я чувствую, что как-то companyByName() Функция вызывается событием, которое срабатывает до того, как символ вводится во ввод. Какие-нибудь мысли?

6

angular-bootstrap angular-ui-typeahead angularjs javascript php

Решение

Другие решения

Typeahead должен быть быстрее, чем дайджест страницы и, следовательно, использовать вместо значения значение видимости, просто его там не совсем.

Вот это поршень, показывающий обе версии. По сути вам нужна первая версия, как показано ниже

 scope.companyByName = function(val) {
var companyName = val;
var searchTerms = {name: companyName, startRow: 0, endRow: 20};

return $http.post("backend/get/companies.php", searchTerms).then((result) => {
$log.info("Companies", result.data.results);
return result.data.results;
});
};

0

Источник

Accepted Answer

Проблема в том, что ng-модель отстает от значений представления. когда companyByName называется ng-модель не обновляется до последнего значения из поля ввода. Чтобы получить последнее значение из ввода, вы должны использовать аргумент, который передается в companyByName функция:

scope.companyByName = function(viewValue) {
var searchTerms = {name: viewValue, startRow: 0, endRow: 20};

return $http.post("backend/get/companies.php", searchTerms).then((result) => {
$log.info("Companies", result.data.results);
return result.data.results;
});
};

4