ng-repeat 上的 Angularjs OrderBy 不起作用

Posted 2023-02-27

【中文标题】ng-repeat 上的 Angularjs OrderBy 不起作用

【英文标题】：Angularjs OrderBy on ng-repeat doesn't work

【发布时间】：2014-07-18 04:09:11

【问题描述】：

我正在尝试将 AngularJS 用于我的第一个项目（锦标赛经理），而 ng-repeat 上的 orderBy 过滤器不起作用:( 我已阅读所有 documentation about that，但无事可做：/

所以，我在$scope 上定义了这样的变量：

$scope.order_item = "count_win";
$scope.order_reverse = false;
$scope.teams = 
  100 : 
    id: 100,
    name: "XXX",
    count_win: 1,
    count_loose: 2,
    goal_average: 1,
  ,
  200 : 
    id: 200,
    name: "XXX",
    count_win: 1,
    count_loose: 2,
    goal_average: 1,
  ,
  [...]
;

现在，在我看来，我正在尝试重新订购（首先只有一个订单项目）但从来没有工作......

<tr ng-repeat="team in teams | orderBy:order_item:order_reverse">
   <td>team.name</td>
   <td>team.count_loose</td>
   <td>team.goal_average</td>
</tr>

第二次，我想从 2 条信息中重新排序：count_win 和 goal_average 如果第一个相等。我尝试像这样替换 $scope.order_item，但如果使用一个代码不起作用，他永远不会和 2 一起工作......

$scope.order_item = ['count_win','goal_average'];

感谢大家的阅读，对于帖子的大小表示抱歉。

【问题讨论】：

Angular - Can't make ng-repeat orderBy work的可能重复

【参考方案1】：

$scope.teams 不是数组（它是对象的对象），orderBy 过滤器仅适用于数组。如果您将$scope.teams 设为数组，它将起作用：

$scope.teams = [
    
      id: 100,
      name: "team1",
      count_win: 3,
      count_loose: 2,
      goal_average: 2,
    ,
    
      id: 200,
      name: "team2",
      count_win: 3,
      count_loose: 2,
      goal_average: 1,
    ,        
    
      id: 300,
      name: "team3",
      count_win: 1,
      count_loose: 2,
      goal_average: 1,
     
];

或者，您可以添加一个适用于对象的特殊过滤器，如下所示（借用自 here）：

app.filter('orderObjectBy', function() 
  return function(items, field, reverse) 
    var filtered = [];
    angular.forEach(items, function(item) 
      filtered.push(item);
    );
    filtered.sort(function (a, b) 
      return (a[field] > b[field] ? 1 : -1);
    );
    if(reverse) filtered.reverse();
    return filtered;
  ;
);

并像这样使用它：

<tr ng-repeat="team in teams | orderObjectBy:order_item:order_reverse">

请注意，此自定义过滤器不适用于问题第二部分中的排序顺序数组。

【讨论】：

何谢谢你，我明白了......我尝试添加你的 oderObjectFilter 但我不知道如何将这个添加到我的应用程序......（我知道我是新手)。

我尝试添加这样的过滤器： angular.module('orderObjectBy', []).filter('orderObjectBy', function() *** );和 angular.module('poolApp', ['poolApp.controllers', 'poolApp.services', 'orderObjectBy']);但不工作：/ angular.mo

这是一个显示它工作的 plunker：plnkr.co/edit/Ml1oLWnqPG72OokYNjb2?p=preview 如果这没有帮助，我需要查看您的代码。

它们有很多无用的代码，但你可能明白问题所在：jsfiddle.net/2u895

有趣的是，您可以 ng 重复它，但不能使用过滤器对其进行排序。希望 Angular 在这种情况下变得更加一致。如果您可以重复它，我希望能够过滤它。

【参考方案2】：

您不必为 orderBy 创建范围参数，如果您正在处理数组，则可以直接在标记中执行此操作。

<tr ng-repeat="team in teams | orderBy:count_win:false">

有两个参数，你应该这样做

<tr ng-repeat="team in teams | orderBy:['count_win','goal_average']">

对于更复杂的订单，您可以在您的范围内创建一个函数，如下所示：

$scope.customOrder = function (team) 
    //custom

就这样称呼它

<tr ng-repeat="team in teams | orderBy:customOrder">

就像@Jerrad 所说，ng-repeat 仅适用于数组，因此您需要将您的团队对象转换为数组才能使其正常工作。

【讨论】：

要将您的团队对象转换为数组？

@tatarin0 你真的应该冷静下来，伙计。

对不起，我只花了 20 分钟试图弄清楚为什么你的答案不起作用。

即使是两个小时，也不是这样攻击某人的理由。此外，如果您完整地阅读了我的答案，而不是仅仅查看代码，那么您可能不会遇到这个问题。

【参考方案3】：

ng-repeat 仅适用于数组，不适用于 JSON 对象。 这已经在这里讨论过：Angular - Can't make ng-repeat orderBy work

您要么必须将 JSON 对象更改为数组，要么即时将其转换。 控制器可能看起来像这样：

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

app.controller('Ctrl', function ($scope) 

    $scope.teams = [
        
            id: 100,
            name: "A Team",
            count_win: 1,
            count_loose: 2,
            goal_average: 1
        ,
        
            id: 200,
            name: "C Team",
            count_win: 2,
            count_loose: 3,
            goal_average: 4
        ,
        
            id: 300,
            name: "B Team",
            count_win: 4,
            count_loose: 1,
            goal_average: 8
        
    ];
    $scope.predicate = 'name';
);

我在这里用一个包含你的数据的演示创建了一个小提琴：

http://jsfiddle.net/c3VVL/