Nested ng repeat, natural sorting keys

Question

I have data which can take the following format:

var data = 
{
0:[1:"a", 2:"b", 11:"c", 22:"d"],
1:[1:"e",2:"f",11:"g",22:"h"]
}

If I do the following:

<div ng-repeat="(key, value) in data">
    <div ng-repeat="(innerKey, innerValue) in value">
        {{innerKey}}
    </div>
    <br/>
</div>

This will give me:

1 11 2 22
1 11 2 22

since it is sorting by string comparison on the keys, not the numeric value of the key

What I really want is:

1 2 11 22
1 2 11 22

Any suggestions?

Answer 1

If you could restructure the data a little bit, you could try this. I removed the nested data to simplify the core issue.

http://jsfiddle.net/rsmclaug/BHF9C/

Also, the data as-is is not valid array syntax.

<div ng-repeat="item in data | orderBy:'key'">
    {{item.key}} - {{item.value}}
</div>

$scope.data = [
    {key: 1, value: "a"}, 
    {key: 12, value: "c"}, 
    {key: 2, value: "b"}, 
    {key: 22, value:"d"}
];