Angularjs OrderBy на ng-repeat не работает

Я пытаюсь использовать AngularJS для моего первого проекта (менеджер турниров) и на 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'];

спасибо всем за чтение и извините за размер поста.

34
angularjs angularjs-filter angularjs-ng-repeat

3 ответов

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

обратите внимание, что этот фильтр не будет работать с массивом сортировки как во второй части вашего вопроса.

53

вам не нужно создавать параметр scope для вашего 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 работает только с массивами, поэтому вам нужно преобразовать объект teams в массив, чтобы заставить его работать правильно.

10

ng-repeat работает только на массивах, а не на объектах JSON. Это уже обсуждалось здесь: угловой-не может заставить ng-повторить orderBy работать

вам нужно либо изменить объект 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/

8