How to sort a dynamic select list in AngularJS

Question

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>

Try to use orderBy: 'Name', just a property name without item. — Ali Baig
– Ali Baig, Commented Jan 20, 2017 at 21:32
You should just write code with the array of data and the select loading it, then we can analyze and test it concretely. — sylvain1264
– sylvain1264, Commented Jan 20, 2017 at 21:32
We have a winner on the very first comment. Ali Baig (and jbrown) got it right. I just tried it and it worked. So simple. Thanks. My list looks so nice now! — Steve Gaines
– Steve Gaines, Commented Jan 20, 2017 at 21:49
@SteveGaines Please do read the help center article on what to do when someone answers your question. — Heretic Monkey
– Heretic Monkey, Commented Jan 20, 2017 at 23:21

Heretic Monkey · Accepted Answer · 2017-01-20 23:20:16Z

1

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>

edited Jan 20, 2017 at 23:20

Heretic Monkey

12.2k7 gold badges63 silver badges133 bronze badges

answered Jan 20, 2017 at 22:54

Ali Baig

3,8674 gold badges36 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

How to sort a dynamic select list in AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related