8

私はこのようなオブジェクトを持っています：

$scope.phones = new Object();
$scope.phones['id1'] = {
    "name":"Phone Name1",
    "dateReleased":"2012-1-09 15:48:24"
};
$scope.phones['id2'] = {
    "name": "Phone Name2",
    "dateReleased":"2012-3-12 15:32:11"
};
$scope.phones['id3'] = {
    "name": "Phone Name3",
    "dateReleased":"2012-2-10 13:53:32"
};

ngRepeatを使用してこれを表示しています。で注文できませんdateReleased。また、逆の順序付けは機能しません。私のngRepeatはこれに見えます：

<li ng-repeat="phone in phones | orderBy:dateReleased:true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>
4

4 に答える 4

12

ngRepeatは$scope.phones、例のようにハッシュオブジェクトを反復処理できますが、組み込みのorderByフィルターは機能しません。これは、オブジェクトの保存方法によるものだと思います。他の人が指摘しているように、ハッシュを配列に変換する必要があります。上記の方法を使用してこれを行うことができますが、私はカスタムフィルターを使用してこれを行うことを好みます。これにより、ハッシュを直接変更する必要がないという利点があります。また、フィルターを他のハッシュで再利用することもできます。

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

このフィルターは、オブジェクトを標準配列に変換し、指定したフィールドで並べ替えます。フィールド名の後にブール値を含めて、とorderObjectByまったく同じようにフィルターを使用して、順序を逆にするかどうかを指定できます。orderByつまり、false昇順、true降順です。

<li ng-repeat="phone in phones | orderObjectBy:'dateReleased':true">
  <p>{{phone.name}}</p>
  <p>{{phone.dateReleased}}</p>
</li>

このトピックに関する投稿がブログにあります。

于 2013-09-17T19:19:07.830 に答える
5

ドキュメントを確認すると、orderByの式は関数、文字列、または配列である可能性があることが示されています。したがって、 dateReleasedを文字列にする必要があります：'dateReleased'

また、電話のオブジェクトが実際の配列である必要があります。

試す：

$scope.phones = [{
        "name":"Phone Name1",
        "dateReleased":"2012-1-09 15:48:24"
    },{
        "name": "Phone Name2",
        "dateReleased":"2012-3-12 15:32:11"
    },{
        "name": "Phone Name3",
        "dateReleased":"2012-2-10 13:53:32"
    }];

<li ng-repeat="phone in phones | orderBy:'dateReleased':true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>
于 2012-11-25T18:12:38.547 に答える
3

他の両方の答えはあなたを途中まで連れて行きますが、ずっとではありません...

次のように、オブジェクトを配列に変換する関数をスコープに作成する必要があります。

$scope.phonesArray = function() {
    var result = [];
    angular.forEach($scope.phones, function(phone, id) {
      result.push(phone);
    });
    return result;
};

次に、ngRepeatのオブジェクトの代わりにそれを呼び出します。

<li ng-repeat="phone in phonesArray() | orderBy:'dateReleased':true">
    <p>{{phone.name}}</p>
    <p>{{phone.dateReleased}}</p>
</li>

また'dateReleased'、これは文字列であるため、現在のアイテムからその文字列を$ evalすることを認識しています。そうでない場合は、存在しない親の$scope.dateReleasedをチェックします。

これがあなたがやろうとしていることのプランクです

編集：関数が「高価」すぎるのではないかと心配している場合は、オブジェクトを配列に「変換」して$ scopeに格納することもできますが、それは問題にはなりません。多くのユーザー向けのサーバーアプリケーションではなく、1人のユーザー向けのクライアントサイドアプリを再開発します。つまり、「高価」な余地が少しあります。（とにかくそれはありません）

于 2012-11-27T00:10:39.337 に答える
2

まず、それを理解して配列（アイテムの順序付けられたコレクション）を操作する必要がありng:filterますng:orderByが、オブジェクト（_un_orderedアイテムのコレクション）でそれらを使用しようとしています。考えられるアプローチの1つは、すべてのオブジェクトを配列に収集し、ng-repeat代わりにそれを続行することです。このような：

<ul ng-init="phones = [
      {name:'Phone Name 1', dateReleased:'2011-1-09 15:48:24'}
    , {name:'Phone Name 2', dateReleased:'2012-3-12 15:32:11'}
    , {name:'Phone Name 3', dateReleased:'2012-2-10 13:53:32'}]; 
    pred = '-dateReleased';" >
    <li ng-repeat="phone in phones | orderBy:pred">
        <p>{{phone.name}}</p>
        <p>{{phone.dateReleased}}</p>
    </li>
</ul>
于 2012-11-25T18:11:20.170 に答える