26

I have been trying to use ng-options to display an array of fonts in a select sorted alphabetically by the value of the items in the array.

HTML

<select ng-options="font for font in webfonts | orderBy:'font'" name="fonts">
     <option value="">Choose a font</option>
</select>

JS

$scope.webfonts = [ 
        'Abel', 'Crafty Girls' , 'Lato' , 'Average',
        'Corben', 'Quicksand', ... ];

I've tried changing the value in orderBy and other things. I've read through the documentation and all comments.

What am I missing? Is this supposed to only work on objects?

Chris Bier
  • 14,183
  • 17
  • 67
  • 103

2 Answers2

53

This is what you need to do:

<select ng-model="selected" ng-options="font for font in webfonts | orderBy:'toString()' " name="fonts">
  1. You need to add ng-model to correctly make the binding works for a list of strings.
  2. You can use toString() to sort if the input contains a list of strings. Since the expression of orderBy can be a Getter function. The result of this function will be sorted using the <, =, > operator.

Demo

zs2020
  • 53,766
  • 29
  • 154
  • 219
  • 1
    @ChrisB Because `toString()` is available in any `string` object in the prototype. This is indeed a trick, and it deserves to keep in mind forever. – zs2020 Aug 15 '13 at 20:45
  • 2
    It works because `.toString()` is a property of the string in the array `webfonts`, and `orderBy` is expecting a property of the object given (`font`). At the same time `toString()` returns the value of `font` which happens to be exactly what I want to order by. Is this right? Am I understanding it correctly? – Chris Bier Aug 15 '13 at 21:17
3

As the documentation specifies, the string argument is for object properties, not for primitives. I think, as elementary as it sounds, you have to create a function on the scope that simply returns the argument, and pass that to orderBy.

See jsFiddle!

Steve Klösters
  • 9,427
  • 2
  • 42
  • 53