角度ng重复多排序

Angular ng-repeat multi-sort

本文关键字：排序 ng 角度      更新时间：2023-09-26

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

[
  {
    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 重复时，椰子、香蕉、哈密瓜和樱桃在开始时按该顺序出现，然后按created_at日期排序。是否可以结合使用 orderBy 和具有过滤器？

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

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

至于确保你首先出现"椰子、香蕉、哈密瓜和樱桃"，你需要根据某个值创建自己的排序方法。对于我的示例，我已经将属性 favorite 添加到您希望显示在数组顶部的元素中，然后按 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排序。

>>工作 Plunkr 示例

-MBP

这就是我最终所做的：

.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;
  };
})
相关文章：