[解決済み] AngularJSのプロパティによるソート
2023-02-23 14:08:57
質問
私は、あるデータをプロパティでソートしようとしています。以下は、私が動作するはずだと思った例ですが、そうではありません。
HTML部分です。
<div ng-app='myApp'>
<div ng-controller="controller">
<ul>
<li ng-repeat="(key, value) in testData | orderBy:'value.order'">
{{value.order}}. {{key}} -> {{value.name}}
</li>
</ul>
</div>
</div>
JSの部分です。
var myApp = angular.module('myApp', []);
myApp.controller('controller', ['$scope', function ($scope) {
$scope.testData = {
C: {name:"CData", order: 1},
B: {name:"BData", order: 2},
A: {name:"AData", order: 3},
}
}]);
そして、その結果。
- A -> AData
- B -> BDデータ
- C -> CDデータ
...IMHOではこのように表示されるはずです。
- C -> CData
- B -> BDデータ
- A -> ADデータ
私は何かを見逃しましたか(ここに準備されている JSFiddle で実験する準備ができています)?
どのように解決するのですか?
AngularJSのorderByフィルターは配列をサポートしているだけで、オブジェクトはサポートしていません。だから、あなたはあなたのためにソートを行う独自の小さなフィルタを記述する必要があります。
または、扱うデータの形式を変更します(それに影響を与えることができる場合)。オブジェクトを含む配列は、ネイティブのorderByフィルターでソート可能です。
ここで、私の orderObjectBy フィルタです。
app.filter('orderObjectBy', function(){
return function(input, attribute) {
if (!angular.isObject(input)) return input;
var array = [];
for(var objectKey in input) {
array.push(input[objectKey]);
}
array.sort(function(a, b){
a = parseInt(a[attribute]);
b = parseInt(b[attribute]);
return a - b;
});
return array;
}
});
ビューでの使用法。
<div class="item" ng-repeat="item in items | orderObjectBy:'position'">
//...
</div>
この例ではオブジェクトに位置属性が必要ですが、ビューで定義するだけで、オブジェクトに(整数を含む)任意の属性を使用する柔軟性があります。
JSONの例です。
{
"123": {"name": "Test B", "position": "2"},
"456": {"name": "Test A", "position": "1"}
}
使い方を示すフィドルを以下に示します。 http://jsfiddle.net/4tkj8/1/
関連
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] JavaScript でオブジェクトが特定のプロパティを持つかどうかを確認するにはどうすればよいですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] オブジェクトのプロパティを値でソートする
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】未定義のオブジェクトプロパティを検出する
-
[解決済み】オブジェクトの配列をプロパティ値でソートする
-
[解決済み] Javascript の parseInt() で先頭のゼロを削除する。
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScript のネストしたオブジェクトや配列に文字列パスでアクセスする
-
[解決済み] AngularJsでの日付の降順フィルター
-
[解決済み] JavaScriptで次の要素/前の要素を取得しますか?
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] jqueryはjavascriptのライブラリなのかフレームワークなのか?[クローズド]
-
[解決済み] CORS: 認証モードは 'include' です。
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] jQueryのバージョン1、バージョン2、バージョン3の違いは何ですか?[クローズド]
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行