CODEWITHSUNDEEP
angularjs
Steve Gaines
Steve Gaines

Reputation: 601

How to sort a dynamic select list in AngularJS

I have a page in an AngularJS single page application that displays data from multiple tables in my database by reading metadata about the table structure. When a field is a lookup to a foreign key it automatically creates a select drop-down list. Everything is working except I can't get the list to sort by name. It is sorting by the primary key ID field which is usually an int type. Below is the controller script that loads the options list in the model and the view script that displays the select control and tries to sort the items. Can you tell me how to redo this so that it will work? I have also tried with and without the single quotes in the orderBy clause and I have tried using toString() in the orderby clause, but nothing has worked.

// controller script
var responseData = responseFK.data;
angular.forEach(responseData, function (item)
{
    columnOptions = columnOptions.concat({ "ID": item[columnNameFK], "Name": item[columnNameFK_Name] });
});
column.COLUMN_OPTIONS = columnOptions;

// view script
<select ng-switch-when="select" ng-options="item.ID as item.Name for item in x.COLUMN_OPTIONS | orderBy: 'item.Name'" ng-model="x.COLUMN_VALUE" ng-required="x.REQUIRED" required></select>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>

Upvotes: 0

Views: 859

Answers (1)

Ali Baig
Ali Baig

Reputation: 3867

Try to use orderBy: 'Name', just a property name without item. So your view script should now be:

<select ng-switch-when="select" ng-options="item.ID as item.Name for item in x.COLUMN_OPTIONS | orderBy: 'Name'" ng-model="x.COLUMN_VALUE" ng-required="x.REQUIRED" required></select>

Upvotes: 1

Related Questions