在ng-repeat上的Angularjs OrderBy是无效的

I'm trying to use AngularJS for my first project (a tournaments manager) and the orderBy filter on ng-repeat doesn't work :( I have read all the documentation about that, but nothing to do :/

我正在尝试在我的第一个项目中使用AngularJS(一个锦标赛经理)，而在ng-repeat上的orderBy过滤器不起作用

So, I have vars defined on $scope like that :

我在$scope上定义了vars:

$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,
  },
  [...]
};

Now, on my view i'm trying to reorder (first with only one order item) but never work...

现在，在我看来，我正在尝试重新排序(首先只有一个订单项)，但从来没有工作过……

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

The second time, I want to reorder from 2 pieces of information: count_win and goal_average if first are equal.. I try to replace $scope.order_item like that, but if with one the code doesn't work, he'll never work with 2...

第二次，我想从两方面重新排序:count_win和goal_average如果第一个是相等的。我试图替换$scope。这样的order_item，但是如果其中一个代码不能工作，那么他将永远不会使用2……

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

Thank you all for reading and sorry for the post size.

谢谢大家的阅读，抱歉邮件的大小。

3 个解决方案

#1

$scope.teams isn't an array (it's an object of objects), and the orderBy filter only works with arrays. If you make $scope.teams an array, it will work:

美元的范围。团队不是数组(它是对象的对象)，orderBy过滤器只对数组有效。如果你让美元范围。一个数组，它将工作:

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

Or, you can add a special filter that works on objects, like this (borrowed from 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;
  };
});

And use it like this:

像这样使用它:

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

Note that this custom filter will not work with an array of sort orders as in the second part of your question.

请注意，这个自定义过滤器不会像问题的第二部分那样使用排序顺序数组。

#2

You don't have to create a scope parameter for your orderBy, you can directly do this in your markup if you are dealing with arrays.

您不必为orderBy创建范围参数，如果要处理数组，可以在标记中直接这样做。

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

With two parameters, you should just do

有了两个参数，就可以了

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

After for a more complex order, you could create a function in your scope like so :

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

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

And just call it like

就这么叫吧

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

Like @Jerrad said, ng-repeat only works with arrays, so you need to convert your teams object into an array to get it work properly.

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

#3

ng-repeat works only on arrays, not on JSON objects. This was already discussed here: Angular - Can't make ng-repeat orderBy work

ng-repeat只适用于数组，而不适用于JSON对象。这里已经讨论过了:角-不能做ng重复的orderBy工作。

You either have to change the JSON object to an Array, or to convert it on the fly. The controller could then look like this:

您要么必须将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';
});

I created a fiddle here with a demo containing your data:

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

http://jsfiddle.net/c3VVL/

#1