AngularJS: HTML select to use values from map with ascending order on key

Question

I have map(Bidirectional) of States. Which composed of stateName and stateCode. It is populated by following HTML code but cannot filter by stateCode or stateName in ascending order.

<div class="col-sm-2">
              <select ng-model="location.stateCode"  ng-change="loadDistricts();" ng-options="stateName for (stateCode, stateName) in stateOptions | orderBy:'stateCode'" class="form-control" id="state"></select>
</div>

//Json Object
    stateOptions = {'MH':'Maharashtra','GJ':'Gujarat','MP':'Madhya Pradesh'};

If the key is stateCode you should have for (stateCode, stateName) instead of for (stateName, stateCode) — Michel
– Michel, Commented Oct 10, 2015 at 12:52
@Michael - Thanks for comment, i also tried by doing it. In both way it does not populate by ascending order. — Pramod Gaikwad
– Pramod Gaikwad, Commented Oct 10, 2015 at 12:57

Michel · Accepted Answer · 2015-10-10 13:19:46Z

1

You inverted stateCode and stateName:

ng-options="stateName for (stateCode, stateName) in stateOptions"

Also, as stateOptions is an object, the keys will probably be inserted alphabetically, depending on the js virtual machine. The orderBy filter is here pointless, because (from documentation):

Orders a specified array by the expression predicate. It is ordered alphabetically for strings and numerically for numbers

See fiddle

Edit: If you want to surely control the order, rework your structure as an array:

$scope.stateOptions = [{
    stateCode: 'MH',
    stateName:'Maharashtra'
},{
    stateCode: 'GJ',
    stateName:'Gujarat'
},{
    stateCode: 'MP',
    stateName:'Madhya Pradesh'
}];

ng-options="state.stateName for state in stateOptions | orderBy: 'stateCode'"

See updated fiddle

edited Oct 10, 2015 at 13:19

answered Oct 10, 2015 at 12:55

Michel

28.6k6 gold badges67 silver badges72 bronze badges

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

5 Comments

Pramod Gaikwad Over a year ago

Hello @Michael - I edited the question, it does not work in either way.

Pramod Gaikwad Over a year ago

Hello @Michael- Thank you, but still it is not sorted. What will be option for that, or can i sort it using js and then render it.

Michel Over a year ago

You will have to pass an array to ng-options. See edit in answer

Pramod Gaikwad Over a year ago

Yes ! This will definitely solve the problem. Thanks you so much.

Michel Over a year ago

Glad we sorted this out:)

AdityaParab · Accepted Answer · 2015-10-10 12:58:25Z

0

Another way

    <select ng-model="location.stateCode" ng-change="loadDistricts();" 

     ng-options="stateName for (stateCode, stateName) in stateOptions | orderBy:'toString()' | filter:stateCode" 

     class="form-control" id="state">

answered Oct 10, 2015 at 12:58

AdityaParab

7,1003 gold badges30 silver badges40 bronze badges

1 Comment

Pramod Gaikwad Over a year ago

Hello @Aditya- Thank you for posting answer. But there is a problem by using it, it gives error- Filter:notarray.

Pramod Gaikwad · Accepted Answer · 2015-10-12 08:28:12Z

0

This will be also good option if we do not want to re-structure our object. Fist sort our map object based on keys then pass it to ng-options.

$scope.stateOptions = sortObject($scope.stateOptions);

function sortObject(obj) {
            return Object.keys(obj).sort().reduce(function (result, key) {
            result[key] = obj[key];
            return result;
        }, {});}

answered Oct 12, 2015 at 8:28

Pramod Gaikwad

1851 gold badge2 silver badges16 bronze badges

Collectives™ on Stack Overflow

AngularJS: HTML select to use values from map with ascending order on key

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related