AngularJSで動的表を表示する方法は？

Question

JSONをどのように作成するかに応じて、すべてのデータを適切にロードする動的テーブルを作成しようとしていました。テーブルの作成を担当

HTML：：これまでのところ、私はこれを持って

<div class="container" ng-controller="QuotationsController as vm"> 
<h2>Quotations</h2> 
<p> 
    <a href="\">Create Quotation</a> 
</p> 
<table class="table"> 
    <tr ng-repeat="Quotation in vm.Quotations"> 
     <th ng-repeat="(key,val) in Quotation"> {{ key }} </th>    
    </tr> 
    <tr ng-repeat="Quotation in vm.Quotations"> 
     <td ng-repeat="(key,val) in Quotation"> {{ val }}</td> 
     <td> 
      <a href="\">Edit</a> | 
      <a href="\">Details</a> | 
      <a href="\">Delete</a> 
     </td> 
    </tr> 
</table> 

コントローラー：

(function() { 
"use strict"; 

angular 
    .module("PPM") 
    .controller("QuotationsController", ["QuotationsService", QuotationsController]);  

function QuotationsController(QuotationsService) { 

    var vm = this; 

    vm.Quotations = [ 
    { 
     "ID": 1, 
     "Description": "Leaf Rake", 
     "Name": "GDN-0011",    
    }, 
    { 
     "ID" : 2, 
     "Description": "Garden Cart", 
     "Name": "GDN-0023",    
    }, 
    { 
     "ID": 5, 
     "Description": "Hammer", 
     "Name": "TBX-0048",    
    }, 
    { 
     "ID": 8, 
     "Description": "Saw", 
     "Name": "TBX-0022",    
    }, 
    { 
     "ID": 10, 
     "Description": "Video Game Controller", 
     "Name": "GMG-0042",    
    } 
    ];   
} 

}）（）;

（。。私はテスト目的のために、コントローラ内のデータをハードコーディングされてきた私は、後でこれを削除し、Web APIへの呼び出しを行います）

これは私に次のような結果得られます。

を

存在する見積もりごとにテーブル見出しを繰り返すことは望ましくありません。一度だけ表示したいのですが、ng-repeatなしでプロパティをどのように処理するのか分かりません。これどうやってするの？

Answer 1

コントローラのループを最初の結果に戻すか、htmlを実行します。どちらにしても。

のHTML方法あなたの答えのための

<div class="container" ng-controller="QuotationsController as vm"> 
<h2>Quotations</h2> 
<p> 
    <a href="\">Create Quotation</a> 
</p> 
<table class="table"> 
    <tr > 
     <th ng-repeat="(key,val) in vm.Quotations[0] "> 
      {{ key }} 
     </th> 
    </tr> 
    <tr ng-repeat="Quotation in vm.Quotations"> 
     <td ng-repeat="(key,val) in Quotation"> 
      {{ val }} 
     </td> 
     <td> 
      <a href="\">Edit</a> | <a href="\">Details</a> | <a href="\">Delete</a> 
     </td> 
    </tr> 
</table> 

Answer 2

<th>要素を含む<tr>要素でng-repeatを使用したため、複数のヘッダーがあります。 ng-repeatを削除します。

<table class="table"> 
    <tr> 
     <th ng-repeat="(key,val) in vm.Quotation[0]"> {{ key }} </th>    
    </tr> 
    <tr ng-repeat="Quotation in vm.Quotations"> 
     <td ng-repeat="(key,val) in Quotation"> {{ val }}</td> 
     <td> 
      <a href="\">Edit</a> | 
      <a href="\">Details</a> | 
      <a href="\">Delete</a> 
     </td> 
    </tr> 
</table> 

何かがうまくいくはずです。

要素がある場合にng-ifを追加することをお勧めします。