Using angular-ui bootstrap and typeahead-loading

Question

So I can't seem to figure out how to use the typeahead-loading attribute to show a spinner while my typeahead is getting remote data. I can't find any examples of its use anywhere.

Is that value something we would need to set manually in the scope when we start a request? and then manually set it to false when the request completes? Sometimes there is magic with these angular things and i'm never sure if something extra is happening on the back-end to handle some of these things.

Just a simple example of how to use the value in typeahead-loading would be nice. I just can't think of how to use it correctly. Of course much of the angular documentation lacks good examples for some of the more complex features.

Answer 1

In my opinion the documentation is not that unclear on this: "Binding to a variable [...]". So you just specify a variable in your current scope which will be set to true while the lookup is running. Here is a very dumb example just to show whats happening:

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>

If you run this and type something in to the search, you will notice that the output is "isLoading: false". However on the javascript console you will see that while the lookup function is running, $scope.isLoading is set to true.

So just specify a variable in your scope with typeahead-loading and then you can do something like this:

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

Answer 2

No need to go through a function (I don't, anyway):

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