如何使用angularjs以表格格式显示下面的JSON

大家好，我从我的rest服务中获得了上述JSON，并希望使用angularjs在表中显示此结果。我的问题是我希望以不同的方式在表中显示详细信息，如下所示：- 01-23-7 8-14 15+无LDOC总计 股票 出售

数据是动态的，其值可能会有所不同。请告诉我一个方法。多谢各位

我需要在此表视图中显示

[
    {
        "type": "SOLD",

        "count": 2,
        "ldocRange": "No LDOC",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 7,
        "ldocRange": "3 - 7",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 6,
        "ldocRange": "3 - 7",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 13,
        "ldocRange": "15+",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 2,
        "ldocRange": "No LDOC",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 1,
        "ldocRange": "8 - 14",
        "brand": "SAL"

    },
    {
        "type": "SOLD",

        "count": 2,
        "ldocRange": "15+",
        "brand": "SAL"

    },
    {
        "type": "STOCK",

        "count": 20,
        "ldocRange": "8 - 14",
        "brand": "SAL"

    }
]

今天
1-2天
3-7天
8-12天
15天以上
无建造日期
全部的
出售
2.
5.
9
12
3.
0
31
股票
2.
5.
7.
3.
4.
0
30
 
4.
10
13
15
12
0
61

---

您可以使用正常的

表格

语法加上angular的

ng repeat

指令在数组中循环，直到满足您的需要：

var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.data=[
{
“类型”：“已售出”，
“计数”：2，
“ldocRange”：“无LDOC”，
“品牌”：“萨尔”
},
{
“类型”：“已售出”，
“计数”：7，
“ldocRange”：“3-7”，
“品牌”：“萨尔”
},
{
“类型”：“库存”，
“计数”：6，
“ldocRange”：“3-7”，
“品牌”：“萨尔”
},
{
“类型”：“库存”，
“计数”：13，
“ldocRange”：“15+”，
“品牌”：“萨尔”
},
{
“类型”：“库存”，
“计数”：2，
“ldocRange”：“无LDOC”，
“品牌”：“萨尔”
},
{
“类型”：“已售出”，
“计数”：1，
“ldocRange”：“8-14”，
“品牌”：“萨尔”
},
{
“类型”：“已售出”，
“计数”：2，
“ldocRange”：“15+”，
“品牌”：“萨尔”
},
{
“类型”：“库存”，
“计数”：20，
“ldocRange”：“8-14”，
“品牌”：“萨尔”
}
];
}

表tr td{
边框：1px纯黑；
填充物：5px；
}

{{obj.type}
{{obj.count}
{{obj.ldocRange}}
{{obj.brand}}

请查看我的最新问题并提供答案，对不起，我不明白。您是否要求使用html

表格

标记？是的，我希望以我在问题中提到的上述方式显示。请根据我的示例构建您的

html

标记，直到它满足您的需要。您的阵列甚至没有要显示的所有数据。

<table class="toggle-table">
<th style="background:none; border:0px;">&nbsp;</th>
<th>Today</th>
<th>1-2 Days</th>
<th>3-7 Days</th>
<th>8-12 Days</th>
<th>15+ Days</th>
<th>No Build Date</th>
<th>Total</th>
 <tr class="rowToClick">
    <td class="sold-btn">Sold</td>
    <td class="today-red">2</td>
    <td class="today-red">5</td>
    <td class="day-yellow">9</td>
    <td class="day-yellow">12</td>
    <td class="day-green">3</td>
    <td class="day-skyblue">0</td>
    <td class="day-skyblue">31</td>
</tr>
<tr class="rowToClick2">
    <td class="stock-btn">Stock</td>
    <td class="today-red">2</td>
    <td class="today-red">5</td>
    <td class="day-yellow">7</td>
    <td class="day-yellow">3</td>
    <td class="day-green">4</td>
    <td class="day-skyblue">0</td>
    <td class="day-skyblue">30</td>
</tr>
<tr class="total">
    <td>&nbsp</td>
    <td class="red-max">4</td>
    <td class="red-max">10</td>
    <td class="yellow-max">13</td>
    <td class="yellow-max">15</td>
    <td class="green-max">12</td>
    <td class="skyblue-max">0</td>
    <td class="skyblue-max">61</td>
</tr>