配列内のサブ配列をAngularJSで並べ替え

オブジェクトの配列を含むデータセットがあり、その中に配列を持つ各オブジェクトがある場合、どのようにサブパートをそのプロパティで並べ替えることができますか？例えば、ここではいくつかのサンプル音楽データがあり、それはその中にトラックと2枚のアルバムを持っています配列内のサブ配列をAngularJSで並べ替え

albums: [ 
    { 
    type: "album", 
    name: "Brothers", 
    tracks: [ 
     { 
     type: "track", 
     name: "Everlasting Light" 
     }, 
     { 
     type: "track", 
     name: "Next Girl" 
     }, 
     { 
     type: "track", 
     name: "Tighten Up" 
     } 
    ] 
    }, 
    { 
    type: "album", 
    name: "Listen", 
    tracks: [ 
     { 
     type: "track", 
     name: "Around Town" 
     }, 
     { 
     type: "track", 
     name: "Forgive & Forget" 
     } 
    ] 
    } 
]

結果は次のようになります。

- Around Town 
- Everlasting Light 
- Forgive & Forget 
- Next Girl 
- Tighten Up

を私はng-repeatを使用することができますどのような方法がありますアルファベット順に並べられた音楽トラックのリストを作成しますか？

私はそれが以下のように動作すると思いますが、私はうまくいっていませんでした。

<p ng-repeat="track in albums.tracks">{{track.name}}</p>

出典

2016-07-03 Alex Wohlbruck

さて、あなただけのアルファベット順にトラックを表示したい、より多くの何もない：ここでは、スニペットの作業ですね。 – developer033

@developer033それでは基本的なレベルで必要なのですが、データ構造を変更することはできません –

アルバムのトラックだけが必要なので、すべてのトラックを1つのアレイにマージしてから、アルファベット順にソートする必要があります。

var app = angular.module('app', []); 
 

 
app.controller('mainCtrl', function($scope) { 
 
    $scope.albums = [ 
 
    { 
 
     "type":"album", 
 
     "name":"Brothers", 
 
     "tracks":[ 
 
     { 
 
      "type":"track", 
 
      "name":"Everlasting Light" 
 
     }, 
 
     { 
 
      "type":"track", 
 
      "name":"Next Girl" 
 
     }, 
 
     { 
 
      "type":"track", 
 
      "name":"Tighten Up" 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     "type":"album", 
 
     "name":"Listen", 
 
     "tracks":[ 
 
     { 
 
      "type":"track", 
 
      "name":"Around Town" 
 
     }, 
 
     { 
 
      "type":"track", 
 
      "name":"Forgive & Forget" 
 
     } 
 
     ] 
 
    } 
 
]; 
 
    
 
    $scope.tracks = []; 
 
    angular.forEach($scope.albums, function(value) { 
 
    $scope.tracks = $scope.tracks.concat(value.tracks); 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"> 
 
</script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <div ng-repeat="track in tracks | orderBy:'name'"> 
 
    <span ng-bind="track.name"></span> 
 
    </div> 
 
</body> 
 
</html>

出典

2016-07-03 05:02:47 developer033

これで十分です。私はこれを行うための組み込みの方法があることを望んでいた –

orderbyフィルタを使用すると、プロパティに基づいてリストを並べ替えることができます。角度のウェブサイトは、ここでは、このhttps://docs.angularjs.org/api/ng/filter/orderBy

詳細は、あなたがプロパティでソートするために、あなたのHTML内で直接フィルタを使用することができ、https://plnkr.co/edit/goxNA9PvBeFL0hyWp9hR?p=preview

に役立つかもしれないplunkerでいます。

<div ng-repeat="album in albums"> 
    <h2>{{album.name}}</h2> 
     <div ng-repeat="track in album.tracks | orderBy:'name'"> 
      {{track.name}} 
     </div> 
</div>

出典

2016-07-03 04:36:38 AshwinK

文句が分かりにくい場合は、すべてのトラック名をアルファベット順に並べ替えることができます。私はあなたが望む結果を表示するために質問を更新しました –

トラック用の新しい配列を作成し、各アルバムから配列を取り出すためにlodashを使用することができました。 Ng-repeatとトラック上で順番にそれがそれを行う必要があります。 https://plnkr.co/edit/juYgqPNNjZnZGe7Pea5w?p=preview – AshwinK

配列内のサブ配列をAngularJSで並べ替え

答えて

関連する問題