如何使用自定义排序顺序对 Angular js 中的对象进行排序？答案

【问题标题】：How to sort object in angular js with custom sort order?如何使用自定义排序顺序对 Angular js 中的对象进行排序？
【发布时间】：2014-08-06 18:33:42
【问题描述】：

我想以自定义排序方式显示对象的属性数组。以下是数组

$scope.weekDays = [
            {
                "day" : "TUESDAY",
                "count": 10
            },
            {
                "day" : "MONDAY",
                "count": 20
            },
            {
                "day" : "WEDNESDAY",
                "count": 30
            },
            {
                "day" : "SUNDAY",
                "count": 60
            }];

如果我们从weekDays 打印日期，就像星期二、星期一、星期三、星期日

但我想按“SUNDAY”、“MONDAY”、“FRIDAY”、“TUESDAY”、“WEDNESDAY”的顺序显示

为此我做了以下操作

        $scope.orde = ["SUNDAY", "MONDAY", "FRIDAY", "TUESDAY","WEDNESDAY"];

        $scope.Sorted = [];

        $scope.SortCustomOrder = function() {
            var _c =0;
            for(var i = 0; i < $scope.orde.length; i++) {
                for (var _i = 0; _i < $scope.weekDays.length; _i++) {
                    if($scope.weekDays[_i].day==$scope.orde[i]) {
                        $scope.Sorted[_c] = $scope.weekDays[_i];
                        _c++;
                    }
                }
            }
        };

并打印 $scope.Sorted。它打印了我所说的。

有什么方法可以简化这个或 angularjs 中的任何其他方法？

【问题讨论】：

你可以添加唯一的、递增的键，然后按它来排序

标签： javascript angularjs sorting

【解决方案1】：

您可以像这样使用内置的orderBy 过滤器：

app.controller('MainCtrl', function($scope, orderByFilter) {

  $scope.weekDays = [{
    "day": "TUESDAY",
    "count": 10
  }, {
    "day": "MONDAY",
    "count": 20
  }, {
    "day": "WEDNESDAY",
    "count": 30
  }, {
    "day": "SUNDAY",
    "count": 60
  }];

  var dateOrders = ["SUNDAY", "MONDAY", "FRIDAY", "TUESDAY", "WEDNESDAY"];

  $scope.Sorted = orderByFilter($scope.weekDays, function(item) {
    return dateOrders.indexOf(item.day);
  });
});

Plunker 示例： http://plnkr.co/edit/IZfiavmZEpHf4hILdjQs?p=preview

【讨论】：

这是一个聪明的方法，不知道你可以像这样注入和使用单个过滤器

【解决方案2】：

我已经让你成为一个工作的笨蛋

$scope.weekDays = [
        {
            "id" : 3,
            "day" : "TUESDAY",
            "count": 10
        },
        {
            "id" : 2,
            "day" : "MONDAY",
            "count": 20
        },
        {
            "id" : 4,
            "day" : "WEDNESDAY",
            "count": 30
        },
        {
            "id" : 1,
            "day" : "SUNDAY",
            "count": 60
        }];
$scope.orderedWeekDays = $filter('orderBy')($scope.weekDays, 'id')

http://plnkr.co/edit/WdMQj7dJxuGsR2b9TRvZ?p=preview

【讨论】：

期望排序顺序在另一个属性中。如果像上面的 { "id" : 3, "day" : "TUESDAY", "count": 10 },.. 我们可以通过 | 打印orderBy：weekDays.id。
这就是我在 plunker 中所做的，我提供了两个版本
我正在考虑如何在 weekDays 对象中没有 id。订单对象是一个单独的对象，表示日期。即..按给定对象排序。喜欢 runTarm 建议

【解决方案3】：

好吧，对于所有此类排序和过滤操作，我通常会选择任何可用的库..

我强烈推荐这个：http://jscriptlinq.codeplex.com/..

对您的收藏进行排序非常简单：

var arr = [{id: 'a', pos: 5},
    {id: 'd', pos: 2},
    {id: 'b', pos: 4},
    {id: 'c', pos: 3},
    {id: 'e', pos: 1}];

// col1 = ['e', 'd', 'c', 'b', 'a']
var col1 = $linq(arr)
    .orderBy(function (x) { return x.pos; })
    .select(function (x) { return x.id; })
    .toArray();

// col2 = ['a', 'b', 'c', 'd', 'e']
var col2 = $linq(arr)
    .orderBy("x => x.id")
    .select("x => x.id")
    .toArray();

【讨论】：