web-dev-qa-db-ja.com

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

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

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

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

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

javascriptangularjsangularjs-orderby
39
Cameron Singe

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）で機能し、ソートされた配列を返すことに注意してください。 orderByはkeyとvalueについて何も知りません。

19
Mark Rajcok

これは実装されていません。こちらをご覧ください：

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

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

11
akonsu

選択リストでこれを可能にするカスタムフィルターを作成しました。

.filter('toDictionaryArray', function () {
    return function (obj) {
        if (!(obj instanceof Object)) return obj;

        var arr = [];
        for (var key in obj) {
            arr.Push({ key: key, value: obj[key] });
        }
        return arr;
    }
})

選択リストのng-optionsは、次のように読み取ります。

<select ng-options="kv.key as kv.value for kv in p.options | toDictionaryArray | orderBy:'value'"></select>
6
Peter Riesz

回避策は次のとおりです（ angular-toArrayFilter ）：

.filter('toArray', function () {
  return function (obj, addKey) {
    if ( addKey === false ) {
      return Object.keys(obj).map(function(key) {
        return obj[key];
      });
    } else {
      return Object.keys(obj).map(function (key) {
        if(typeof obj[key] == 'object') return Object.defineProperty(obj[key], '$key', {     enumerable: false, value: key});
      });
    }
  };
});
2
joseym

Akonsuが言うように、機能は要求されました ここ 。ただし、最新の（1.3.0）ベータ版ではまだ動作しませんでした。

素敵な回避策 がコメントに埋まっています（これには アンダースコア が必要で、上記の '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に直接統合されていないため、構文が異なります。
2
Dunc

オブジェクトではなく配列のみをサポートするorderbyフィルターを使用する代わりに。このように独自のフィルターを作成できます。JustinKlemmからコードを取得しました 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>
0
Patrick Tan