Sort an angular ng-repeat list based on nested value

Question

How do I sort my ng-repeat list from the nested value of the snippet attribute skärm: My controller looks like this:

'use strict';

/* Controllers */

function PhoneListCtrl($scope){
    $scope.phones = [

        {"name" : "Samsung Galaxy S4",
         "snippet" : {  "Operativsystem" : "Android 4.2.2",
                            "Skärm" : "4,99 tum",
                            "CPU" : "Quad-core 1,6GHz",
                            "Kamera, bak" : "13 MP",
                            "Kamera, fram" : "1,9 MP",
                            "Övrigt" : "Närfältskommunikation (Eng. near field communication, NFC)"
                            },
            "date" : "2012-04-27T00:00:00.000Z"
        },


        {"name" : "iPhone 5",
          "snippet" : { "Operativsystem" : "iOS 7",
                            "Skärm" : "4 tum",
                            "CPU" : "Apple A6 1,3GHz dual core",
                            "Kamera, bak" : "8 MP",
                            "Kamera, fram" : "1,2 MP",
                            "Övrigt" : "-"
                           },
            "date" : "2012-09-21T00:00:00.000Z"
        },

                {"name" : "iPhone 5s",
          "snippet" : { "Operativsystem" : "iOS 7",
                            "Skärm" : "42 tum",
                            "CPU" : "Apple A7 1,3 GHz dual core",
                            "Kamera, bak" : "8 MP",
                            "Kamera, fram" : "1,2 MP",
                            "Övrigt" : "-"
                           },
            "date" : "2013-09-20T00:00:00.000Z"
        }
    ]


};

The alphabetic and date based sortings work but how do i use the nested value of Skärm as the sorting parameter?

        <b>Sort by:  </b> 
        <select ng-model="sortByProp">
            <option value="name">Alfabetiskt</option>
            <option value="date">Nyast</option>
            <option value="snippet.Skärm">Skärmstorlek</option>
        </select>

    </div>
    <div class="span10">
        <h1>The future of mobile devices</h1>

        <ul class="phonesListing">
        <li ng-repeat="phone in phones | filter:query | orderBy:sortByProp">
            <h3>{{phone.name}}</h3>
            <ul>
                <li ng-repeat="(key,value) in phone.snippet">
                    <b>{{key}}:</b>     {{value}}
                </li>
            </ul>
        </li>
        </ul>
        <p>Total number of phones: {{phones.length}}</p>
    </div>

you seem to need to override orderBy filter to split parameter on . and use list to loop and get properties. — vittore
– vittore, Commented Sep 26, 2013 at 12:36

jusio · Accepted Answer · 2013-09-26 12:49:09Z

2

If you want to sort by Skärm property, you'll have to define sorting expression like this:

 <option value="snippet['Skärm']">Skärmstorlek</option>

Plunker

Looks like angular have some problems with non-ASCII symbols used in expressions.

answered Sep 26, 2013 at 12:49

jusio

9,9201 gold badge44 silver badges57 bronze badges

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

2 Comments

David Karlsson Over a year ago

how do i reverse this one sorting attribute particularilly

jusio Over a year ago

Add + or - in front of sorting expression. Link to documentation: code.angularjs.org/1.0.8/docs/api/ng.filter:orderBy

Collectives™ on Stack Overflow

Sort an angular ng-repeat list based on nested value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related