Matt Burrow
Matt Burrow

Reputation: 11067

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

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

Upvotes: 0

Views: 1289

Answers (1)

Manuel Mazzuola
Manuel Mazzuola

Reputation: 795

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

Upvotes: 1

Related Questions