Using angular-ui bootstrap and typeahead-loading
Asked Answered
Z

2

9

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.

Zenaidazenana answered 26/9, 2013 at 17:27 Comment(1)
This isn't technically and answer to your question, but a suggestion for a different method altogether. I don't really like using an external spinner/div/span/etc. I prefer to just use placeholder="{{someScopeVar}}" and typeahead-on-select="onSelect($item, $model, $label)" in the typeahead input tag, initialize $scope.someScopeVar to "loading..." in the controller, then use the onSelect function to change the $scope.someScopeVar to the regular placeholder text like "Search by name".Holly
K
16

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>
Klenk answered 26/9, 2013 at 19:25 Comment(1)
Thanks, things make more sense now. Good exampleZenaidazenana
M
3

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>  
Marlow answered 4/5, 2015 at 5:38 Comment(1)
I see, you were just using a function to print to the console?Marlow

© 2022 - 2024 — McMap. All rights reserved.