Question

所以我似乎无法弄清楚当typeahead获取远程数据时如何使用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>

使用angular-ui bootstrap和typeahead-loading

2 个答案: