AngularJS filter | orderBy with custom order

Question

I am trying to order a list in a ng-repeat. What i want to do is set the order by hand, so i can say players first, coach second and waterboy last in the list. This is where i got but now got stuck with filters (kinda new to me):

$scope.Team=  [{
  Name: "Saras"
  Role: "coach"
  },{
  Name: "Arya"
  Role: "player"
  },{
  Name: "Adam"
  Role: "waterboy"
  },{
  Name: "Theo"
  Role: "player"
  },{
  Name: "Mark"
  Role: "player"
  },{
  Name: "Oscar"
  Role: "player"
  },{
  Name: "Tom"
  Role: "player"
  },{
  Name: "Gus"
  Role: "coach"
}];


<div ng-repeat="person in Team | orderBy:Role>
     <div>{{person.Name}}</div>
</div>

i would like to orderBy 'Role' this way, where i can set the order

'player', 'coach', 'waterboy'

with the filter below i am able to set the order correct and add the label of the Role (coach, player etc.), however the labels sometimes get repeated. How could i fix that?

<div ng-repeat="person in Team | myOrder:'Role'>
      <h2 ng-show="item.Role_CHANGED">{{item.Role}}</h2>
     <p>{{person.Name}}</p>
</div>


app.filter('myOrder', function () {
    return function (list, group_by) {

        function CustomOrder(item) {
            switch (item) {
                case 'coach':
                    return 2;

                case 'player':
                    return 1;

                case 'waterboy':
                    return 3;

            }
        }

        var filtered = [];
        var prev_item = null;
        var group_changed = false;
        var new_field = group_by + '_CHANGED';

        angular.forEach(list, function (item) {

            group_changed = false;

            if (prev_item !== null) {

                if (prev_item[group_by] !== item[group_by]) {
                    group_changed = true;

                }

            } else {
                group_changed = true;
            }

            if (group_changed) {
                item[new_field] = true;


            } else {
                item[new_field] = false;
            }
  
            filtered.push(item);
            prev_item = item;


        });

        filtered.sort(function (a, b) {
            return (CustomOrder(a.Role) > CustomOrder(b.Role) ? 1 : -1);
        });

        return filtered;
    };
})

Answer 1

try this example :

html :

<div class="test" ng-controller="Ctrl">
  <div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>
<div>

js :

var app = angular.module('app', []);

function Ctrl($scope) {
  $scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1},{'group':2,'sub':11}];
}

Answer 2

alright what i did to solve this is that i moved the sort function to the front when i GET the data from the JSON repsonse.

        $http({
            method: 'Get',
            url: "https://xxxxxxx.azurewebsites.net/api/team/" + id_company
        })
            .success(function (data) {

                var neworder = [];

                function CustomOrder(item) {
                    switch (item) {
                        case 'player':
                            return 1;

                        case 'coach':
                            return 2;

                        case 'waterboy':
                            return 3;

                    }
                }

                angular.forEach(data, function (item) {
                    neworder.push(item);
                });

                neworder.sort(function (a, b) {
                    return (CustomOrder(a.Role) > CustomOrder(b.Role) ? 1 : -1);
                });

                $scope.Team = neworder;


            });

after i just run the filter without the sort function;

<div ng-repeat="person in Team | myOrder:'Role'>
      <h2 ng-show="item.Role_CHANGED">{{item.Role}}</h2>
     <p>{{person.Name}}</p>
</div>


app.filter('myOrder', function () {
    return function (list, group_by) {

        var filtered = [];
        var prev_item = null;
        var group_changed = false;
        var new_field = group_by + '_CHANGED';

        angular.forEach(list, function (item) {

            group_changed = false;

            if (prev_item !== null) {

                if (prev_item[group_by] !== item[group_by]) {
                    group_changed = true;

                }

            } else {
                group_changed = true;
            }

            if (group_changed) {
                item[new_field] = true;


            } else {
                item[new_field] = false;
            }
  
            filtered.push(item);
            prev_item = item;


        });

        return filtered;
    };
})

it's a bit of a work-around but it did the job

just to be complete, if you just want to sort the ng-repeat in a filter and no need for the lables. you can just do this:

<div ng-repeat="person in Team | Sorter:'Role'>
     <p>{{person.Name}}</p>
</div>

app.filter('Sorter', function () {

    function CustomOrder(item) {
        switch (item) {
            case 'player':
                return 1;

            case 'coach':
                return 2;

            case 'waterboy':
                return 3;

        }
    }

    return function (items, field) {

        var filtered = [];
        angular.forEach(items, function (item) {
            filtered.push(item);
        });
        filtered.sort(function (a, b) {
            return (CustomOrder(a.Role) > CustomOrder(b.Role) ? 1 : -1);
        });
        return filtered;
    };
});