CODEWITHSUNDEEP
angularjsangular-uiangular-ui-bootstrapangular-ui-typeahead
Ben
Ben

Reputation: 1581

Does orderBy work with AngularUI typeahead?

This question is related to another question I asked.

I have managed to get AngularUI Typeahead to work. However, my orderBy filter does not appear to do anything.

This select box orders everything correctly (distance is a custom function):

<select ng-model="fromStation"
ng-options="item.name for item in stations.station | orderBy:distance">

But this typeahead:

<input type="text" ng-model="fromStation" 
typeahead="item as item.name for item in stations.station 
| filter:$viewValue | limitTo:8 | orderBy:distance">

doesn't change the order at all (i.e. it remains sorted alphabetically). What I would like to achieve is that when a user types the first letter of a - in this case - train station, the station closest to him containing that letter would appear first. Is it possible to make this work or is this feature not available (yet)?

Upvotes: 5

Views: 4159

Answers (1)

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

It is hard to be 100% sure without seeing a minimal reproduce scenario (this is why it is always a good idea to include live, minimal example using http://plnkr.co/ or similar) but looking at your HTML code I think that the problem is in the order of applying filters.

If you apply the limitTo filter first it will just cut off first 8 results from an un-sorted array and only then will sort the cut off set. Try revert the order of the orderBy and the limitTo filters like so:

<input type="text" ng-model="fromStation" typeahead="item as item.name for item in stations.station | filter:$viewValue | orderBy:distance | limitTo:8">

to see if this does the trick and if not - post a minimal reproduce scenario using plunker.

Upvotes: 3

Related Questions