AngularJS - Dropdown Select Values are not in Order with ng-repeat

Question

I have a select drop down with the following data; (This is also the output to the console in Chrome).

{
    8: "Something", 
    9: "Something Again!", 
    10: "And again", 
    11: "And again!", 
    12: "etc...", 
    13: "etc etc...", 
}

The html and angular for the select drop down;

<select name="name" ng-model="choosen"> 
   <option value="">Please Select</select>
   <option ng-repeat="(key, value) in data" value="[[key]]">[[value]]</option>
</select>

The data is got from using the following query within Laravel (4.2) using the lists function;

Model::lists('name','id');

For some reason the data for the drop down gets reordered within my drop down to;

<select name="name" ng-model="choosen"> 
   <option value="">Please Select</select>
   <option value="10">And again</option>
   <option value="11">And again!</option>
   <option value="12">etc...</option>
   <option value="13">etc etc...</option>
   <option value="8">Something</option>
   <option value="9">Something Again!</option>
</select>

How do i make the output from the ng-repeat run through the order of the data in the correct numerical order?

Like so;

<select name="name" ng-model="choosen"> 
   <option value="">Please Select</select>
   <option value="8">Something</option>
   <option value="9">Something Again!</option>
   <option value="10">And again</option>
   <option value="11">And again!</option>
   <option value="12">etc...</option>
   <option value="13">etc etc...</option>
</select>

Plunkr is here

->orderBy('id', 'asc') ? ngRepeat doesn't reorder your data so the data you pass to the ngRepeat are in that order (sorry for the wordplay) — Manuel Mazzuola
– Manuel Mazzuola, Commented Oct 17, 2014 at 10:46
@originof The order of the data is correct from the controller to the angular, the console output is the order of the data. But when put into the ng-repeat the data is moved around. — Matt Burrow
– Matt Burrow, Commented Oct 17, 2014 at 10:49
Probably the workaround is plnkr.co/edit/S8BiSPy9axQobSZVwk3D?p=preview — Manuel Mazzuola
– Manuel Mazzuola, Commented Oct 17, 2014 at 11:22

Manuel Mazzuola · Accepted Answer · 2014-10-17 13:00:41Z

1

Seems that ngRepeat order the data by the $$hash, probably the workaround is to use a function that list the keys and then iterate over them:

 $scope.keys = function(obj){
  return obj? Object.keys(obj) : [];
 }

http://plnkr.co/edit/S8BiSPy9axQobSZVwk3D?p=preview

answered Oct 17, 2014 at 13:00

Manuel Mazzuola

7951 gold badge7 silver badges25 bronze badges

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

1 Comment

Manuel Mazzuola Over a year ago

You can also create a filter that do the same job

Collectives™ on Stack Overflow

AngularJS - Dropdown Select Values are not in Order with ng-repeat

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related