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