アンギュラjsキーでスタッキングを繰り返す

Question

私はAngular JSを初めて使い、基本的な機能を理解しています。私はng-repeatとfilterオプションを使用して、固有のキーではない出力を得るのには苦労しています。

車を色で表示したり、カテゴリを作成したりしたいと思います。私が見たい所望の結果（この場合の色が選択されている）である。

Sort by: CarID, Make or **Color** 
Blue 
    Focus 
Red 
    Camry 
    Mustang 
Yellow 
    LandCruiser 

コントローラからの配列は次のとおり

cars: [ 
{ 
    "carid": 1, 
    "makeid": 1, 
    "carname": 'camry', 
    "color": 'red' 
}, 
{ 
    "carid": 2, 
    "makeid": 2, 
    "carname": 'mustang', 
    "color": 'red' 
}, 
{ 
    "carid": 3, 
    "makeid": 1, 
    "carname": 'landcruiser', 
    "color": 'yellow' 
}, 
{ 
    "carid": 4, 
    "makeid": 1, 
    "carname": 'focus', 
    "color": 'blue' 
}, 
{ 
    "carid": 5, 
    "makeid": 3, 
    "carname": 'civic', 
    "color": 'blue' 


    } 
] 

make: [ 
    { 
     "makeid": 1, 
     "makeName": 'Toyota' 
    }, 
    { 
     "makeid": 2, 
     "makeName": 'Ford' 
    }, 
    { 
     "makeid": 3, 
     "makeName": 'Civic' 
    } 
] 

Iはなく、仕事なしに次のHTMLを使用しようとした

<div class="car" ng-repeat="car in cars track by color"> 
    <label>{{car.color}}</label> 
    <div class="subcar" ng-repeat="c in cars filer by car.color"> 
     <label>{{c.carname}}</label> 
    </div> 
</div> 

また、上記のクエリでは、「Make link」をクリックすると、フィルタの色をどのように置き換えることができますか？

Answer 1

あなたがした後、あなたが何であるかを達成するための角度フィルタモジュールとGROUPBYコレクションを利用することができる：

<div ng-app="myApp"> 
    <div ng-controller="myCtrl"> 
    <a href="" ng-click="ourGrouper ='color'">Color</a> 
    <a href="" ng-click="ourGrouper ='makeid'">Make</a> 

    <ul ng-repeat="(key, value) in cars | groupBy:ourGrouper"> 
     <li> 
     <span ng-if="ourGrouper=='makeid'">{{(make | filter:{makeid:key})[0].makeName}}</span> 
     <span ng-if="ourGrouper=='color'">{{key}}</span> 
     <ul> 
      <li ng-repeat="car in value"> 
      {{car.carname}} 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

これは、オブジェクトのご提供の配列に基づいて動作しますが、本当に理想的ではありません... JSONのISN」実際にIDで他のオブジェクトを参照するように設計されていますが、上記の設定は、SQLデータベースを正規化するために使用する構造のほうが多くあります。これらのJSONオブジェクトを何らかの形でコントロールしている場合は、その2つを組み合わせて、makeNameがmakeidを置き換えます。

ような何か：

$scope.cars = [{ 
    "carid": 1, 
    "makeName": 'Toyota', 
    "carname": 'camry', 
    "color": 'red' 
}]; 

そして、あなたはng-repeatにng-if条件ロジックを削除することができ、ちょうど{{key}}

作業を例に置く：モジュールのドキュメントへ https://jsfiddle.net/r0m4n/pn0g3rrg/

リファレンス： https://github.com/a8m/angular-filter#groupby