1

テンプレートに次の div があります。

<div ng-repeat="item in billing_history | orderBy:'-timestamp'">{{ item.date }}</div>

console.log(JSON.stringify($scope.billing_history))私に次を与えます：

{
  "May, 2015":{
     "date":"May, 2015",
     "timestamp":1432921230
  },
  "March, 2015":{
     "date":"March, 2015",
     "timestamp":1427846400
  },
  "February, 2015":{
     "date":"February, 2015",
     "timestamp":1425168000
  }
}

何はともあれ、以下のように表示されます。

February, 2015
March, 2015
May, 2015

私は試してみましorderBy:'-timestamp'たorderBy:'+timestamp'

なぜこれが機能しないのか、私には本当にわかりません。誰かが間違っている可能性があることを見ていますか?

4

3 に答える 3

2

オブジェクト リテラルでフィルターを使用することはできませんorder-by(または、期待どおりに機能しません)。あなたが持っているのはオブジェクトリテラルです。基本的に、キー（およびその値）の特定の保証された順序はありません。配列に変換する必要があります。

例：

angular.module('app', []).run(function($rootScope) {
  $rootScope.billing_history = [{
    "date": "May, 2015",
    "timestamp": 1432921230
  }, {
    "date": "March, 2015",
    "timestamp": 1427846400
  }, {
    "date": "February, 2015",
    "timestamp": 1425168000
  }]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <p>Reverse order:
  <div ng-repeat="item in billing_history | orderBy:'-timestamp'">{{ item.date }}</div>
  <p>Correct order:
  <div ng-repeat="item in billing_history | orderBy:'timestamp'">{{ item.date }}</div>
</div>

フィルターは 1 つのオプションですが、注意してください。フィルターは非常にパフォーマンスを集中させます (フィルターは安定するためにダイジェスト サイクルごとに何度も実行されるため、フィルターの内容は非常に重要です)。大きなオブジェクトに対するこのような操作は非常にトリッキーです。ビューモデルを適切に設定するか、コントローラー自体でフォーマットを変換することをお勧めします。

于 2015-05-29T18:05:33.960 に答える
2

orderByfilter は配列で機能し、オブジェクトで使用しています。オブジェクトを配列に変換して試してみてください。

デモ http://plnkr.co/edit/4XtrJQaJ1itrVbb9bwE7?p=preview

于 2015-05-29T17:59:12.030 に答える
1

Justin Klemm がここで行っているように、独自のカスタム フィルターを作成できます。

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;
  };
});

そして、マークアップは次のようになります。

<div ng-repeat="item in billing_history | orderObjectBy:'timestamp'">
  {{ item }}
</div>

または

<div ng-repeat="item in billing_history | orderObjectBy:'-timestamp'">
  {{ item }}
</div>

このjsBinを参照してください

于 2015-05-29T18:13:15.560 に答える