Angular order dropdown select list

Question

How I can order the list in select dropdown using Angular ?

This is the angular controller:

var app = angular.module("app", []);

app.controller('Ctrl', function($scope, $filter, $http) {

    $scope.options= [
                  {
                    "id": 823,
                    "value": "81"
                  },
                  {
                    "id": 824,
                    "value": "77"
                  },
                  {
                    "id": 825,
                    "value": "152"
                  },         
                ];   

    });

And html:

<h4>Angular-xeditable Editable row (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">    
   <select ng-model="test" ng-options="v.id as v.value for v in options | orderBy: value"></select>
</div>

Now the order is: 81, 77, 152

And I want: 77,81,152

How I can do it ?

Jsfiddle to test

Thanks

Stewie · Accepted Answer · 2013-12-18 11:37:14Z

5

Your values are strings so they won't be naturally ordered unless you convert them to integers. You may convert them by creating your own filter or by defining a simple sorting function on your $scope:

Fiddle

<select 
  ng-model="test" 
  ng-options="v.id as v.value for v in options | orderBy: naturalOrder"
></select>

$scope.naturalOrder = function(item){
  return parseInt(item.value, 10);
};

answered Dec 18, 2013 at 11:37

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

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

Comments

Aaron Torgerson · Accepted Answer · 2013-12-18 11:50:28Z

1

You need to place single quotes around the name of the field in your orderBy. The first argument to orderBy is a sort expression string.

in options | orderBy:'value'

You can extend this by adding a + or - before the field name to indicate initial sort direction. You can also provide a boolean value after the sort expression to enable toggling of the sort direction.

<div ng-init="desc=true">
...
in options | orderBy:'+value':desc

answered Dec 18, 2013 at 11:50

Aaron Torgerson

9921 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular order dropdown select list

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