CODEWITHSUNDEEP
angularjs
11OClock
11OClock

Reputation: 65

AngularJS select options order

I'm trying to get a select dropdown with AngularJS. The problem resides in the order of the options : 10 comes right after 2, instead of being at the end of the options list. How can I manage to put it where it should be ?

HTML

<div ng-app>
  <div ng-controller="TestCtrl">
      <select ng-model="val" ng-options="k as v for (k,v) in notes">
      </select>
</div>

JS

function TestCtrl($scope) {
    $scope.notes = {
    '0': 'Non applicable',
    '1': '1 -Très Mauvais',
    '2': '2 -Mauvais',
    '3': '3 -Insuffisant',
    '4': '4 -Mediocre',
    '5': '5 -Moyen',
    '6': '6 -Correct',
    '7': '7 -Bon',
    '8': '8 -Très bon',
    '9': '9 -Excellent',
    '10': '10 -Parfait'
    };
}

Here is a fiddle to demonstrate.

Thanks in advance.

Upvotes: 0

Views: 2042

Answers (2)

Neozaru
Neozaru

Reputation: 1130

As Yoshi said, your data structure is not optimal for such purposes. And as charlierfl said, AngularJs uses numbers as default sorting critieria, so you could do :

$scope.notes = [
    {'value': 0, 'remarque': 'Non applicable'},
    {'value': 1, 'remarque': '1 -Très Mauvais'},
    {'value': 2, 'remarque': '2 -Mauvais'},
    {'value': 3, 'remarque': '3 -Insuffisant'},
    {'value': 4, 'remarque': '4 -Mediocre'},
    {'value': 5, 'remarque': '5 -Moyen'},
    {'value': 6, 'remarque': '6 -Correct'},
    {'value': 7, 'remarque': '7 -Bon'},
    {'value': 8, 'remarque': '8 -Très bon'},
    {'value': 9, 'remarque': '9 -Excellent'},
    {'value': 10, 'remarque': '10 -Parfait'}
];

And in your HTML :

<select ng-model="val" ng-options="note.value as note.remarque for note in notes">
  </select>

Upvotes: 1

Neozaru
Neozaru

Reputation: 1130

Try this :

ng-options="k as v for (k,v) in notes | orderBy:['k']"

Upvotes: 0

Related Questions