web-dev-qa-db-ja.com

ng-repeatのAngularjs OrderByが機能しません

私は最初のプロジェクト（トーナメントマネージャー）でAngularJSを使用しようとしていますが、ng-repeatのorderByフィルターは機能しません:(すべての それに関するドキュメント =、しかし何もしない：/

だから、私はそのような$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,
  },
  [...]
};

今、私の見解では、（最初​​に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回目は、2つの情報から並べ替えます。最初のcount_winとgoal_averageが等しい場合。$scope.order_itemをそのように置き換えますが、1つの場合はコードが動作しない、彼は2で動作することは決してないだろう...

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

読んでくれてありがとう、そして投稿サイズでごめんね。

angularjsangularjs-ng-repeatangularjs-filter
35
Arthur

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

このカスタムフィルタは、質問の2番目の部分のように、並べ替え順序の配列では機能しないことに注意してください。

55
Jerrad

OrderByのスコープパラメーターを作成する必要はありません。配列を扱う場合は、マークアップで直接これを行うことができます。

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

2つのパラメータを使用すると、ちょうどする必要があります

<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は配列でのみ動作するため、チームオブジェクトを配列に変換して適切に動作させる必要があります。

11
Balthazar

ng-repeatは配列でのみ機能し、JSONオブジェクトでは機能しません。これについてはすでにここで説明しました： Angular-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/

8
meberhard