javascript - Angular ng-repeat 多重排序

Question

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

[
  {
    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 时，椰子、香蕉、哈密瓜和樱桃会按该顺序显示在开头，然后它们会按创建日期排序。使用 orderBy 和过滤器的组合是否可以实现这一点？

Answer 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