Angular ng-repeat 多排序答案

【问题标题】：Angular ng-repeat multi-sortAngular ng-repeat 多排序
【发布时间】：2014-12-19 17:55:01
【问题描述】：

我有一个对象数组，我正在尝试以特定方式排序：

[
  {
    name: 'Blackcurrant',
    created_at: '3/2/2014'
  },{
    name: 'Bilberry',
    created_at: '1/2/2013'
  },{
    name: 'Apple',
    created_at: '11/5/2012'
  },{
    name: 'Boysenberry',
    created_at: '1/1/2014'
  },{
    name: 'Coconut',
    created_at: '3/4/2011'
  },{
    name: 'Breadfruit',
    created_at: '6/6/2013'
  },{
    name: 'Currant',
    created_at: '2/8/2014'
  },{
    name: 'Avocado',
    created_at: '5/13/2014'
  },{
    name: 'Banana',
    created_at: '7/16/2014'
  },{
    name: 'Blueberry',
    created_at: '1/18/2010'
  },{
    name: 'Apricot',
    created_at: '9/17/2014'
  },{
    name: 'Date',
    created_at: '2/22/2012'
  },{
    name: 'Damson',
    created_at: '10/10/2014'
  },{
    name: 'Cantaloupe',
    created_at: '8/13/2014'
  },{
    name: 'Cranberry',
    created_at: '4/25/2011'
  },{
    name: 'Cucumber',
    created_at: '7/6/2014'
  },{
    name: 'Blackberry',
    created_at: '2/10/2014'
  },{
    name: 'Cloudberry',
    created_at: '1/23/2014'
  },{
    name: 'Cherry',
    created_at: '7/11/2013'
  },{
    name: 'Cherimoya',
    created_at: '11/19/2014'
  }
]

我需要能够设置它，以便当我执行 ng-repeat 时，椰子、香蕉、哈密瓜和樱桃在开始时按该顺序显示，然后按 created_at 日期排序.这可能使用 orderBy 和过滤器的组合吗？

【问题讨论】：

按您想要的顺序将 JSON 值推送到数组中。然后在视图中引用数组而不是 JSON。
您需要通过自定义函数进行 orderBy
@TheHeadRush：我会做类似的事情，但我需要示波器上的原始文件，因为它会不断更新，而且每次更改时不断更新新的 JSON 只是更多的工作。

标签： javascript angularjs angularjs-ng-repeat angularjs-filter

【解决方案1】：

您可以通过使用 orderBy 过滤器设置重复来按 created_at 属性对 ngRepeat 元素进行排序。

<li ng-repeat="food in arrFoods | orderBy:created_at">
    <span>{{food.name}}</span>
</li>

至于确保“椰子、香蕉、哈密瓜和樱桃首先出现，您需要创建自己的基于特定值的排序方法。在我的示例中，我添加了属性 fave 到您希望在数组顶部显示的元素，然后由created_by 排序。

{
    name: 'Coconut',
    created_at: '3/4/2011',
    fave: true
}

然后将其应用于您的 ngRepeat 元素...

<li data-ng-repeat="food in arrFoods | orderBy:['fave', 'created_by']">

通过应用一个排序参数数组，我们优先考虑将fave设置为true的元素（无需费心将其他设置为false），然后按created_by排序。

>>Working Plunkr Example

-mbp

【讨论】：

感谢您抽出宝贵时间回答。不幸的是，我认为我不会每次都以相同的顺序得到fave 水果。我会测试，但 plunkr 现在没有为我加载。我最终编写了自己的过滤器，似乎可以工作。
你介意投票吗？因为它是您问题的有效答案？
当然。感谢您为我调查。
很高兴我们中的一个人发现了哈哈！干杯! -mbp

【解决方案2】：

这就是我最终做的：

.filter('fruitSort', function() {
  return function(fruits) {
    var favoriteFruit = [];
    var newFruit = [];

    angular.forEach(fruits, function(fruit) {
      if (fruit.name === 'Coconut' || fruit.name === 'Banana' || fruit.name === 'Cantaloupe' || fruit.name === 'Cherry') {
        if (fruit.name === 'Coconut') {
          favoriteFruit[0] = circle;
        } else if (fruit.name === 'Banana') {
          favoriteFruit[1] = circle;
        } else if (fruit.name === 'Cantaloupe') {
          favoriteFruit[2] = circle;
        } else {
          favoriteFruit[3] = circle;
        }
      } else {
        newFruit.push(circle);
      }
    });

    newFruit.sort(function(a,b){return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();});
    var sortedFruit = favoriteFruit.concat(newFruit);

    return sortedFruit;
  };
})

【讨论】：