Angular JS Magazine

marți, 23 septembrie 2014

Sort Items - part 3

In Sort Items - part 2, you saw how to use a function and orderBy filter to write the following filters:

- first filter will sort by prize money all players that are outside the top 10 ATP
-second filter will sort by prize money all players from top 10 ATP

If you had checked the output of the first filter, you noticed that the players from top 10 were not sorted. In the second filter, the players outside top 10 remains unsorted. In order to sort those players by prize money also, you need to use multiple predicates, as below:

<!DOCTYPE html>
<html ng-app="atpModule">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../angular/angular.min.js"></script>
    <link href="../bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="../bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
    <script>
        angular.module("atpModule", [])
                .controller("atpCtrl", function ($scope) {
                    $scope.rankOutsideTop10Sorter = function (item) {
                        return item.rank > 10 ? item.prizemoney : 0;
                    }
                    $scope.rankInsideTop10Sorter = function (item) {
                        return item.rank <= 10 ? item.prizemoney : 999999999999;
                    }
                });
    </script>
</head>
<body>
<div ng-controller="atpCtrl" ng-init="atp=[
     { name: 'Nadal, Rafael (ESP)', rank: 1, age: '28', prizemoney: 66149345 },
     { name: 'Djokovic, Novak (SRB)', rank: 2, age: '27', prizemoney: 70704129 },
     { name: 'Federer, Roger (SUI)', rank: 3, age: '33', prizemoney: 84827704 },
     { name: 'Wawrinka, Stan (SUI)', rank: 4, age: '29', prizemoney: 13155060 },
     { name: 'Ferrer, David (ESP)', rank: 5, age: '32',  prizemoney: 24034072 },
     { name: 'Tsonga, Jo-Wilfried (FRA)', rank: 11, age: '29', prizemoney: 1708240 },
     { name: 'Simon, Gilles (FRA)', rank: 26, age: '29', prizemoney: 760469 },
     { name: 'Lopez, Feliciano (ESP)', rank: 20, age: '33', prizemoney: 1100579 },
     { name: 'Benneteau, Julien (FRA)', rank: 28, age: '32', prizemoney: 617688 },
     { name: 'Verdasco, Fernando (ESP)', rank: 33, age: '30', prizemoney: 689219 },
     { name: 'Mayer, Leonardo (ARG)', rank: 25, age: '27', prizemoney: 946294 }]">

    <div id="atpPanel" class="panel">
        <h3 class="panel-header">ATP SINGLES RANKINGS</h3>
        <span class="label label-primary">Sort players outside top 10 by prize money (and the remaining players)</span>
        <table class="table">
            <thead>
            <tr>
                <th>Rank</th>
                <th>Name</th>
                <th>Age</th>
                <th>Prize Money</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in atp | orderBy:[rankOutsideTop10Sorter, 'prizemoney']">
                <td>{{item.rank}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.prizemoney | currency:"$"}}</td>
            </tr>
            </tbody>
        </table>
        <span class="label label-primary">Sort players in top 10 by prize money (and the remaining players)</span>
        <table class="table">
            <thead>
            <tr>
                <th>Rank</th>
                <th>Name</th>
                <th>Age</th>
                <th>Prize Money</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in atp | orderBy:[rankInsideTop10Sorter, 'prizemoney']">
                <td>{{item.rank}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td>{{item.prizemoney | currency:"$"}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
</html>

First filter output:

Second filter output: