Javascript/JQuery（Ampersand.js/Angular）を介してオブジェクトの配列のオブジェクトをhtmlテーブルに取り込む方法

Question

カテゴリ別にコンテンツを表示するHTMLテーブルを作成しようとしています。 JQuery Datatablesを使用せずにこれを行う必要があります。だから、私は通常のHTMLテーブルでこれをしようとしています。ここで

は、オブジェクトの配列の私のオブジェクトです：

Object { 
    Fruits: [ 
     Apple: { 
      {color: 'red'}, 
      {healthy: true} 
     }, 
     Orange: { 
      {color: 'orange'}, 
      {healthy: true} 
     }, 
     Grape: { 
      {color: 'purple'}, 
      {healthy: true} 
     } 
    ], 
    Sweets: [ 
     Candy: { 
      {color: 'pink'}, 
      {healthy: false} 
     } 
    ], 
} 

私はこの（カテゴリ別に分離された）のようになりますHTMLテーブルを移入しようとしています：

______________________________________ 
| Name  | Color | Healthy? | 
-------------------------------------- 
|Fruits        | 
-------------------------------------- 
| Apple  |  Red |  True | 
|----------------------|-------------- 
| Orange | Orange |  True | 
|----------------------|-------------- 
| Grape  | Purple |  True | 
|----------------------|-------------- 
| Sweets        | 
|------------------------------------- 
| Candy | Pink |  False | 
-------------------------------------- 

私が使用していますAmpersand.js/Angular私は、コレクションから必要なデータをフィルタリングし、HTMLテーブルを生成するためにそれらを別のオブジェクトに配置しようとしています。

私は何をしようとすることは可能ですか？オブジェクトの配列のオブジェクトよりもデータを設定する方が簡単ですか？

Answer 1

私はテーブル内で可能かどうかはわかりませんが、ブートストラップカラムを作成してカスタムのCSSをテーブルのように追加できます。また、複数の配列を持つ代わりに、 "type"と "name"というプロパティを持つオブジェクトの配列を1つ持つことができます。現在のデータは次のようになります。 angularjsで

$scope.data = [{ name:'Apple', color: 'red', healthy: true, type: 'Fruits'}, { name:'Orange', color: 'orange', healthy: true, type: 'Fruits'}, { name:'Grape', color: 'purple', healthy: true, type: 'Fruits'}, { name:'Candy', color: 'pink', healthy: false, type: 'Sweets'}];

あなたは、角度フィルタが含まれている場合は、グループの項目は、プロパティに基づいてすることができます。念のために、orderByのみが箱に入っていることを覚えておいてください。 groupByを使用する必要がある場合は、アプリに'angular-filter'を含める必要があります。角度フィルタhereの詳細を読むことができます。

希望jsfiddleが役に立ちます。