ng-repeat上的Angularjs OrderBy不起作用

一尘不染

ng-repeat上的Angularjs OrderBy不起作用

angularjs

我正在尝试将AngularJS用于我的第一个项目（锦标赛经理），并且orderBy筛选器ng- repeat不起作用:(我已阅读了有关该文档的所有文档，但无济于事：/

所以，我在上面定义了vars $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'];

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

阅读 347

2020-07-04

共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,
     }
];

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

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">

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

2020-07-04