使用angular-ui bootstrap和typeahead-loading

Question

所以我似乎無法弄清楚如何使用typeahead-loading屬性來顯示一個微調器，而我的預先輸入遠程數據。 我無法在任何地方找到任何使用它的例子。

當我們開始請求時，我們需要在范圍內手動設置該值嗎？ 然后在請求完成時手動將其設置為false？ 有時候這些有角度的東西會有魔力，我不知道后端是否會發生額外的事情來處理這些事情。

只是一個如何在typeahead-loading中使用該值的簡單示例。 我只是想不出如何正確使用它。 當然，許多角度文檔缺少一些更復雜功能的好例子。

Answer 1

在我看來，文檔對此並不清楚：“綁定到變量[...]”。 因此，您只需在當前作用域中指定一個變量，該變量將在查找運行時設置為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。

因此，只需使用typeahead-load在范圍中指定一個變量，然后就可以執行以下操作：

<div ng:show="!!isLoading">loading...</div>

Answer 2

無需通過功能（不管怎么說）：

<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>