AngularJS ngOptions sort array

Question

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?

zs2020 · Accepted Answer · 2014-07-29 22:12:36Z

53

This is what you need to do:

<select ng-model="selected" ng-options="font for font in webfonts | orderBy:'toString()' " name="fonts">

You need to add ng-model to correctly make the binding works for a list of strings.
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

edited Jul 29, 2014 at 22:12

answered Aug 15, 2013 at 20:41

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zs2020 Over a year ago

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

Chris Bier Over a year ago

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?

Steve Klösters · Accepted Answer · 2013-08-15 20:33:31Z

4

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!

answered Aug 15, 2013 at 20:33

Steve Klösters

9,4472 gold badges44 silver badges53 bronze badges

1 Comment

Steve Klösters Over a year ago

As the documentation specifies, you can pass a function name and the result of it is used as the comparison value!

Collectives™ on Stack Overflow

AngularJS ngOptions sort array

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related