web-dev-qa-db-ja.com

AngularJSのng-repeatでオブジェクトデータソースを並べ替える方法は？

次のユーザーがいるとします。

$scope.users = {
  "2": {
    email: '[email protected]',
    name: 'John'
  },
  "3": {
    email: '[email protected]',
    name: 'Elisa'
  }
}

次のオプションで<select>を作成したい：

<option value="3">Elisa</option>
<option value="2">John</option>

つまり、ユーザーは名前でソートする必要があります。

(key, value) in expression 構文を使用して次のことを試みましたが、機能しません。

<option ng-repeat="(user_id, user) in users | orderBy:'user.name'" 
        value="{{ user.id }}">
  {{ user.name }}
</option>

ここでのライブ例

私は何が欠けていますか？

ng-optionsと互換性のない ui-select2 を使用しているため、ng-optionsを使用したソリューションを提案しないでください。

angularjsangularjs-ng-repeatangularjs-orderby
48
Misha Moroshko

リンクの著者の回答を参照するスレッドでこれを見るでしょうが、私は言及された回避策の1つをSOに置くのが良いと思いました：

これは技術的に実装されていないことは確かですが、データモデルを少し変更する場合は簡単な回避策があります。カスタムフィルターを使用してオブジェクトのプロパティの配列を生成します（withoutreplacement）。キーフィールドをオブジェクト（上記の場合は「id」）に追加すると、探している動作を取得できるはずです。

app.filter("toArray", function(){
    return function(obj) {
        var result = [];
        angular.forEach(obj, function(val, key) {
            result.Push(val);
        });
        return result;
    };
});
...

$scope.users = {
    1: {name: "John", email: "[email protected]", id: 1},
    2: {name: "Elisa", email: "[email protected]", id: 2}
};

使用できるng-repeatディレクティブは次のとおりです。

<option value="{{user.id}}" ng-repeat="user in users | toArray | orderBy:'name'">{{user.name}}</option>

そして、これが plunkr です。

orderByフィルターは、user.nameではなく、nameをパラメーターとして使用することに注意してください。

残念ながら、オブジェクトにidプロパティを追加すると、それを含むオブジェクトのキーと一致しない可能性があります。

あなたの答えで言及したリンクには、ユーザーオブジェクトにidプロパティをオンザフライで作成する提案されたソリューションもありますが、このアプローチは少し面倒ではないようです（データを導入するコストがかかります）レプリケーション）。

55
mhess

OK、答えが見つかりました：

まだ実装されていません：（

9
Misha Moroshko

受け入れられた回答に追加してデータ形式を確認するには、データを次のように変換する必要があります

app.filter('myFilterUsers',function(){
    return function(data)
    {
        var newRes = [];
        angular.forEach(data,function(val,key){
            val["id"] = key;  //Add the ID in the JSON object as you need this as well.
            newRes.Push(val);
        });
        return newRes;
    }
});
0
Saksham