Question

我正在尝试将AngularJS用于我的第一个项目（锦标赛经理），orderBy上的ng-repeat过滤器不起作用:(我已阅读所有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'];

感谢所有人阅读并抱歉邮件大小。

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

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

Answer 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仅适用于数组，因此您需要将您的团队对象转换为数组才能使其正常工作。

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

Angularjs OrderBy on ng-repeat不起作用

3 个答案: