AngularJS过滤器|通过自定义订单

如何解决AngularJS过滤器|通过自定义订单

我正在尝试在ng-repeat中订购列表。我想做的是手动设置顺序，因此我可以在列表中首先说球员，然后是教练，然后是水手。这是我到达的地方，但现在被过滤器卡住了（对我来说是新的）：

$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>

我想以此方式订购'Role'，在这里我可以设置订单

'player','coach','waterboy'

使用下面的过滤器，我可以正确设置顺序并添加角色的标签（教练，球员等），但是有时标签会重复。我该如何解决？

<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;
    };
})

解决方法

尝试以下示例：

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},'sub':20},'sub':11}];
}

,

好吧，我要做的是在我从JSON响应中获取数据时将排序功能移到了前面。

        $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;


            });

在我没有筛选功能的情况下运行过滤器之后；

<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;
    };
})

这是一个变通办法，但确实可以完成工作

只是为了完整起见，如果您只想在过滤器中对ng-repeat进行排序，而无需使用标签。您可以这样做：

<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;
    };
});