CODEWITHSUNDEEP
angularjs
Marc Morales Valldepérez
Marc Morales Valldepérez

Reputation: 561

Angular order dropdown select list

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

Upvotes: 1

Views: 6530

Answers (2)

Aaron Torgerson
Aaron Torgerson

Reputation: 992

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

Upvotes: 1

Stewie
Stewie

Reputation: 60406

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);
};

Upvotes: 5

Related Questions