如何使用嵌套属性在 AngularJS 中排序答案

【问题标题】：How to orderby in AngularJS using Nested property如何使用嵌套属性在 AngularJS 中排序
【发布时间】：2014-05-18 15:12:09
【问题描述】：

这是使用 PHP 生成的 json

[{"Sale":{"id":"1","customer_id":"1","amount":"15","created":"2014-05-17"}}]

orderBy:id 显然是行不通的。我在其他帖子中读到需要为这种数据结构创建 orderBy 函数。我无法创建该功能。谁能告诉我解决这个问题的正确方法是什么？

【问题讨论】：

阅读this。
您不需要为此使用自定义 orderBy 函数。但是，由于 id 的值是一个字符串，它不会按照我假设您想要的顺序排序。因此，您不妨将排序和 int 转换都放在自定义过滤器中，就像 @Dalorzo 建议的那样。
@Sergey 帮了大忙，谢谢 :)

标签： javascript angularjs

【解决方案1】：

假设你有：

$scope.sales = [{"Sale":{"id":"1"}},{"Sale":{"id":"2"}},{"Sale":{"id":"3"}}];

为什么不做以下事情：

<div ng-repeat="sale in sales | orderBy:'Sale.id':true">
    {{ sale.Sale.id }}
</div>

它适用于我的情况。可能是 Angular 在您提出问题时不支持它。

【讨论】：

这比自定义过滤器简单得多。
诀窍是使用| orderBy: 'propertyName.nestedPropertyName'，希望有角度的文档会提到这种语法。
我通过在控制器中使用动态创建的属性来改进此方法，该属性包含排序字段和排序方向。它看起来像这样 | orderBy:SortController.sort_field:SortController.sort_dir 。 SortController 会动态更新。所以我什至可以按子嵌套属性排序。

【解决方案2】：

我喜欢将这些类型的数据操作保存在适当的角度对象中，因此我会创建自定义过滤器，例如：

var sampleSource=  [{"Sale":{"id":"8","customer_id":"1","amount":"15","created":"2014-05-17"}}, {"Sale":{"id":"5","customer_id":"6","amount":"15","created":"2015-05-17"}}];

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

myApp.filter('myFilter', function() {
 return function(items) {  
    items.sort(function(a,b){   
        if (parseInt(a.Sale.id) > parseInt(b.Sale.id))
            return 1;
        if (parseInt(a.Sale.id) < parseInt(b.Sale.id))
            return -1;         
        return 0; })
});

重要提示：我推荐使用自定义过滤器，因为根据个人喜好，我不喜欢使用可以在其他对象上分离的任务（代码）重载我的控制器或其他对象，这给了我更多的独立性和更简洁的代码（我喜欢 Angular 的原因之一），但除了这个个人偏好之外，我想说这不是唯一的方法，但如果你分享我背后的原因，我希望它有所帮助。

【讨论】：

感谢您的回复
我使用了 Sergey 的链接，但我会接受你的回答。

【解决方案3】：

myapp.filter('orderBySub', function () {
  return function (items, field, reverse) {

    byString = function(o, s) {
        s = s.replace(/\[(\w+)\]/g, '.$1');
        s = s.replace(/^\./, '');
        var a = s.split('.');
        for (var i = 0, n = a.length; i < n; ++i) {
            var k = a[i];
            if (k in o) {
                o = o[k];
            } else {
                return;
            }
        }
        return o;
    }

    items.sort(function (a, b) {
        if (byString(a, field) > byString(b, field))
            return reverse ? -1 : 1;
        if (byString(a, field) < byString(b, field))
            return reverse ? 1 : -1;
        return 0;
    })
    return items;
  }
});

例子

ng-repeat="task in tasks | orderBySub: 'field1.subfield2.subsubfield3':true"

真 = 反向

【讨论】：