Использование начальной загрузки angular-ui и загрузки с опережением ввода

Поэтому я не могу понять, как использовать атрибут загрузки typeahead, чтобы показать счетчик, пока мой typeahead получает удаленные данные. Нигде не могу найти примеры его использования.

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

Было бы неплохо привести простой пример того, как использовать значение при загрузке с опережением. Я просто не могу придумать, как правильно его использовать. Конечно, большей части документации по angular не хватает хороших примеров для некоторых из более сложных функций.


javascript angularjs angular-ui-bootstrap angular-ui-typeahead
person bjo    schedule 26.09.2013    source источник
comment
Это не технически и не ответ на ваш вопрос, а предложение для другого метода в целом. Мне не очень нравится использовать внешний spinner/div/span/etc. Я предпочитаю просто использовать placeholder={{someScopeVar}} и typeahead-on-select=onSelect($item, $model, $label) во входном теге typeahead, инициализировать $scope.someScopeVar для загрузки... в контроллере, затем используйте функцию onSelect, чтобы изменить $scope.someScopeVar на обычный текст-заполнитель, например «Поиск по имени».   -  person Blair Connolly    schedule 04.09.2015

Ответы (2)


arrow_upward
16
arrow_downward

На мой взгляд, документация не так уж неясна по этому поводу: «Привязка к переменной [...]». Таким образом, вы просто указываете переменную в вашей текущей области видимости, которая будет установлена ​​в значение true во время выполнения поиска. Вот очень глупый пример, чтобы показать, что происходит:

function MainController($scope) {
  $scope.lookup = function() {
    console.log("isLoading is " + $scope.isLoading);
    return [];
  }
}

<div ng:controller="MainController">
  <input type="text" ng:model="search"
    typeahead="result for result in lookup($viewValue)"
    typeahead-loading="isLoading"></input>
  isLoading: {{isLoading}}
</div>

Если вы запустите это и введете что-нибудь в поиск, вы заметите, что вывод «isLoading: false». Однако в консоли javascript вы увидите, что пока работает функция поиска, $scope.isLoading имеет значение true.

Так что просто укажите переменную в вашей области с загрузкой типа, а затем вы можете сделать что-то вроде этого:

<div ng:show="!!isLoading">loading...</div>
person Juliane Holzt    schedule 26.09.2013
comment
Спасибо, теперь все более понятно. Хороший пример - person bjo; 27.09.2013

arrow_upward
3
arrow_downward

Не нужно проходить через функцию (во всяком случае, мне это не нужно):

<input ng-model="search" typeahead="result for result in lookup($viewValue)"
    typeahead-loading="is_loading">

<!-- change class (or something) when lookup is loading -->
<span ng-class="{'loading-class': is_loading}">Hey, I'm loading!</span>
person MFB    schedule 04.05.2015
comment
Я вижу, вы просто использовали функцию для вывода на консоль? - person MFB; 27.10.2016