How to sort options in dropdown using AngularJS?

Question

I have dropdown with array of objects for options:

<select class="auc-form-control" ng-options="dataValue.Id as dataValue.Name for (dataKey, dataValue) in Types" ng-model="name">
</select>

Options are sorted by Id like this:

<option value="0">0</option>
<option value="1">1</option>
<option value="10">10</option>
<option value="11">11</option>
...

How can I sort options in a natural way? [1, 2, 3, ...]

Could you please show what does the Types object look like? — runTarm
– runTarm, Commented Aug 13, 2014 at 16:50
You are lacking information here. As Artyom in his answer and comment already pointed out, [0, 1, 10, 11] is the natural order, i.e. for numbers. From your question it is unclear how you want the objects to be ordered or what you consider "natural". Please clarify. — dirkk
– dirkk, Commented Aug 13, 2014 at 17:05

runTarm · Accepted Answer · 2014-08-13 17:01:37Z

2

It seems like your Id properties are strings (not numbers).

In that case, you have to use a custom getter to get a value for sorting. For example:

$scope.getSortValue = function (item) {
  return +item.Id; // convert string to number
};

Then use it with the orderBy filter like this:

<select class="auc-form-control" ng-options="dataValue.Id as dataValue.Name for (dataKey, dataValue) in Types | orderBy:getSortValue" ng-model="name"></select>

Example Plunker: http://plnkr.co/edit/TfVrfhaiuBKbPpHSqp4Q?p=preview

answered Aug 13, 2014 at 17:01

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

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

Comments

Artyom Pranovich · Accepted Answer · 2014-08-13 16:36:26Z

1

What about orderBy filter that can be used like this:

"ng-options="dataValue.Id as dataValue.Name for (dataKey, dataValue) in Types" | orderBy:'Id'"

Please see this JSFiddle with your example.

edited Aug 13, 2014 at 16:36

answered Aug 13, 2014 at 16:30

Artyom Pranovich

6,9728 gold badges44 silver badges60 bronze badges

Collectives™ on Stack Overflow

How to sort options in dropdown using AngularJS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related