AngularJS orderBy

small fiddle to show the usage of orderBy and other built-in filters

by Flavio Corpa

HTML

<div ng-app>
    <div ng-controller="Ctrl">
        <select ng-model="order" ng-show="results.length > 0">
            <option value="-added">Recently Added</option>
            <option value="price">Price (low to high)</option>
            <option value="-price">Price (high to low)</option>
            <option value="name">Name A-Z</option>
            <option value="-name">Name Z-A</option>
        </select>
        <ul>
            <li data-ng-repeat="result in results | orderBy: order">
                <p><b>Id:</b> {{result.id}}</p>
                <p><b>Product:</b> {{result.name}}</p>
                <p><b>Price:</b> {{result.price | currency}}</p>
                <p><b>Added:</b> {{result.added | date:'dd/MM/yyyy'}}</p>
            </li>
        </ul>
    </div>
</div>

JavaScript

function Ctrl($scope) {
    $scope.order = '-added';
    $scope.results = [{
        "id": 1,
            "name": "Pants",
            "price": 10,
            "added": 1387447036483
    }, {
        "id": 2,
            "name": "Skirt",
            "price": 110,
            "added": 1387446157807
    }, {
        "id": 3,
            "name": "Shoes",
            "price": 310,
            "added": 1407502034963
    }, {
        "id": 4,
            "name": "Hat",
            "price": 36,
            "added": 1410973293660
    }, {
        "id": 5,
            "name": "Vase",
            "price": 2,
            "added": 1391102899140
    }];
};