Angular JS order select using key/value

Question

I just asked about generating a select from key/value map instead of array: AngularJS select box generated from object

That is all working fine now: http://jsfiddle.net/UPWKe/1/

<select ng-model="current.addressCode" ng-options="value.code as value.name for (key, value) in student.address | orderBy: 'code'"</select>

... and js ...

$scope.student = {
    address: {
        select: {
            code: "0",
            name: "Select proof of address"
        },
        letter: {
            code: "1",
            name: "Letter"
        },
        photograph: {
            code: "3",
            name: "Photograph"
        }
    },

But the only thing missing, is how to order the select items.

How can I order select items in a select box generated from key/value map in angularjs?

@kangoroo please elaborate, how I could use a filter to sort this? What would I filter? — Billy Moon
– Billy Moon, Commented Sep 6, 2013 at 9:38
@kangoroo I did try using orderBy, but I could not figure out how to get it to work. I would be grateful of any suggestions... — Billy Moon
– Billy Moon, Commented Sep 6, 2013 at 9:44

AlwaysALearner · Accepted Answer · 2013-09-06 09:51:51Z

5

Solution 1: You can use another array to store the order of the fields. For this you would need to use ng-repeat in place of ng-options:

$scope.studentAddressFields = [
    "select",
    "letter",
    "photograph"
]

HTML:

<select ng-model="current.addressCode">
    <option ng-repeat="field in studentAddressFields" 
    value="student.address[field]['code']">
        {{student.address[field]['name']}}
    </option>
</select>

Solution 2: Using a filter:

HTML:

<select ng-model="current.addressCode" ng-options="code as details.name 
for (code, details) in student.address | getOrdered">
</select>

Filter:

myApp.filter('getOrdered', function() {
    return function(input) {
        var ordered = {};
        for (var key in input){            
            ordered[input[key]["code"]] = input[key];
        }           
        return ordered;
    };
});

edited Sep 6, 2013 at 9:51

answered Sep 6, 2013 at 9:33

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

2 Comments

Billy Moon Over a year ago

to make it a general solution, and much more re-usable - is there any way to make code a variable - so something like... (key, val) in someObject | getOrdered:"code"

Craig Over a year ago

Solution 2 does not work correctly. If you have code 2, 10, 15 they will be in the order 10,15,2 and not 2,10,15 even if you remove quotes from code values.

Collectives™ on Stack Overflow

Angular JS order select using key/value

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related