javascript - Orderby が ng-repeat の dict 構文で機能しない

Question

辞書スタイルの構文で ng-repeat を使用し、キー値に順序を適用しようとしています。

(key, value) in something | orderBy:'key'

OrderBy が期待どおりに機能していないようです

ここの例 http://jsfiddle.net/mhXuW/

Answer 1

orderBy へのパラメーターは、オブジェクトの配列内のプロパティ名と一致する必要があります。

データは次のようになっている必要があります。

$scope.list2 = [ { id:"2013-01-08T00:00:00", name:'Joe'},
                 { id:"2013-01-09T00:00:00", name:'Sue'}];

次に、次のようなフィルターが機能します。

<div ng-repeat="item in list2 | orderBy:'id':true">

フィドル。

orderBy は配列全体 (something上記のサンプル コード) で機能し、並べ替えられた配列を返すことに注意してください。keyorderBy はとについて何も知りませんvalue。

Answer 2

これは実装されていません。ここを参照してください:

https://github.com/angular/angular.js/issues/1286

編集 (2013 年 8 月 27 日): この問題は現在解決されているようです。

Answer 3

akonsu が言うように、この機能はここでリクエストされました。ただし、最新の (1.3.0) ベータ版ではまだ動作しませんでした。

コメントに埋められた素晴らしい回避策があります (これにはunderscoreが必要であり、上記の例では 'key' への参照を 'value.$key' に置き換える必要があることに注意してください):

[フィルターを追加]:

app.filter('toArray', function() { return function(obj) {
    if (!(obj instanceof Object)) return obj;
    return _.map(obj, function(val, key) {
        return Object.defineProperty(val, '$key', {__proto__: null, value: key});
    });
}});

マークアップの例:

<div ng-repeat="val in object | toArray | orderBy:'priority' | filter:fieldSearch">
  {{val.$key}} : {{val}} 
</div>

潜在的な欠点:

• Object.defineProperty は、IE8 ではこのようには機能しません ($key を列挙可能にすることを気にしないのであれば、これは簡単な変更です)。
• プロパティ値がオブジェクトでない場合、$key プロパティを設定できず、これは失敗します。
• orderBy または ngRepeat に直接統合されていないため、構文が異なります。

Answer 4

オブジェクトではなく配列のみをサポートする orderby フィルターを使用する代わりに。このように独自のフィルターを作成できます。コードは Justin Klemm http://justinklemm.com/angularjs-filter-ordering-objects-ngrepeat/から取得し、複数の順序付けフィールドを指定するためのサポートを追加しました。以下のフィルターの例は、値のプロパティに基づいてフィルター処理するものですが、キーに基づいてフィルター処理するように簡単に変更することもできます。

app.filter('orderObjectBy', function()
{
    return function(items, fields, reverse)
    {
        var filtered = [];
        angular.forEach(items, function(item)
        {
            filtered.push(item);
        });

        filtered.sort(function (a, b)
        {
            var result = 0;

            for (var i = 0; i < fields.length; ++i)
            {
                if (a[fields[i]] > b[fields[i]])
                {
                    result = 1;
                    break;
                }
                else if (a[fields[i]] < b[fields[i]])
                {
                    result = -1;
                    break;
                }
            }

            return result;
        });

        if (reverse)
        {
            filtered.reverse();
        }

        return filtered;
    };
});

次に、html5 Web ページ内で、統計がキーと値のペアを含むマップ/辞書である場合のように使用します。

<div class="row" ng-repeat="stat in statistics | orderObjectBy: 'NumTimesPartnered', 'NumTimesOpponent']:true">
    <div class="col col-33">{{stat.Name}}</div>
    <div class="col"><center>{{stat.NumTimesPartnered}}</center></div>
    <div class="col"><center>{{stat.NumTimesOpponent}}</center></div>
</div>