如何在AngularJS中显示动态表格？

Question

我试图制作一个动态的 table，根据 JSON 的制作方式，它会相应地加载所有数据。到目前为止我有这个：

HTML负责创建table:

<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",             
     }
    ];        
}

})();

（我有 hard-coded 控制器中的数据仅用于测试目的。稍后我将删除它并调用 Web API。）

这给了我以下结果：

我不希望对每个存在的报价重复 table headers。我只想显示一次，但我不知道如何在没有 ng-repeat 的情况下访问属性。我该怎么做？

Answer 1

您有多个 headers，因为您在包含 <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>

类似的东西应该有用。

如果有 0 个元素，您可能想添加 ng-if。

Answer 2

要么让您的控制器循环处理第一个结果，要么让 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>

如何在AngularJS中显示动态表格？

How to display dynamic tables in AngularJS?

json

dynamic-tables

angularjs