如何使用angularjs以表格的形式显示如下JSON [英] How to display below JSON in table format using angularjs
本文介绍了如何使用angularjs以表格的形式显示如下JSON的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
[
{
类型：卖， 伯爵：2，
ldocRange：没有LDOC
品牌：SAL }，
{
类型：卖， 伯爵：7，
ldocRange：3 - 7，
品牌：SAL }，
{
类型：STOCK， 伯爵：6，
ldocRange：3 - 7，
品牌：SAL }，
{
类型：STOCK， 伯爵：13，
ldocRange：15+，
品牌：SAL }，
{
类型：STOCK， 伯爵：2，
ldocRange：没有LDOC
品牌：SAL }，
{
类型：卖， 伯爵：1，
ldocRange：8 - 14
品牌：SAL }，
{
类型：卖， 伯爵：2，
ldocRange：15+，
品牌：SAL }，
{
类型：STOCK， 伯爵：20，
ldocRange：8 - 14
品牌：SAL }
]
大家好，我从我的REST服务获取上述JSON和想使用angularjs.My问题一个表格来显示这个结果是我想在像下面以不同的方式显示在一个表中的细节： -
0 1-2 3-7 8-14 15+无LDOC总
股票
出售
的数据是动态，它可以在值变化。请告诉我一个办法。谢谢
我需要在此表视图中显示
＆LT;表类=切换表＆GT;
百分位风格=背景：无;边框：0像素;＆GT;＆安培; NBSP;＆LT; /第i
＆LT;第i今天与LT; /第i
＆所述;第i 1-2天及下; /第i
＆LT;第i个3-7天＆LT; /第i
＆LT;第i 8-12天＆LT; /第i
＆LT;第i个15+天＆LT; /第i
＆LT;第i个无生产日期和LT; /第i
百分位个总＆LT; /第i
＆所述; TR类=rowToClick＆GT;
＆LT; TD类=卖-BTN＆GT;销售和LT; / TD＆GT;
＆LT; TD类=今天红＆GT; 2'; / TD＆GT;
＆LT; TD类=今天红＆GT; 5℃; / TD＆GT;
＆LT; TD类=天黄＆GT; 9＆LT; / TD＆GT;
＆LT; TD类=天黄＆GT; 12＆LT; / TD＆GT;
＆LT; TD类=天绿＆GT;第3版; / TD＆GT;
＆所述; TD类=天天蓝大于0＆下; / TD＆GT;
＆LT; TD类=天天蓝＆GT; 31 LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR类=rowToClick2＆GT;
＆LT; TD类=股票BTN＆GT;股票及LT; / TD＆GT;
＆LT; TD类=今天红＆GT; 2'; / TD＆GT;
＆LT; TD类=今天红＆GT; 5℃; / TD＆GT;
＆LT; TD类=天黄＆GT; 7 LT; / TD＆GT;
＆所述; TD类=天黄→3＆下; / TD＆GT;
＆LT; TD类=天绿＆GT; 4℃; / TD＆GT;
＆所述; TD类=天天蓝大于0＆下; / TD＆GT;
＆所述; TD类=天天蓝＆GT; 30℃; / TD＆GT;
＆LT; / TR＆GT;
＆LT; TR类=总＆GT;
＆LT; TD＆GT;＆安培;＆NBSP LT; / TD＆GT;
＆所述; TD类=红 - 最大→4＆下; / TD＆GT;
＆LT; TD类=红-MAX→10＆LT; / TD＆GT;
＆LT; TD类=黄-MAX＆GT; 13 LT; / TD＆GT;
＆所述; TD类=黄 - 最大→15＆下; / TD＆GT;
＆LT; TD类=绿色-MAX＆GT; 12＆LT; / TD＆GT;
＆LT; TD类=天蓝-MAX＆GT; 0℃; / TD＆GT;
＆LT; TD类=天蓝-MAX＆GT; 61℃; / TD＆GT;
＆LT; / TR＆GT;
解决方案
您可以使用正常的表语法加上棱角分明的 NG-重复指令通过阵列循环，直到它适合你的需要：
\r
\r\r
\r VAR对myApp = angular.module（'对myApp'，[]）;\r
\r
功能MyCtrl（$范围）{\r
$ scope.data = [\r
{\r
类型：卖，\r
\r
伯爵：2，\r
ldocRange：没有LDOC\r
品牌：SAL\r
\r
}，\r
{\r
类型：卖，\r
\r
伯爵：7，\r
ldocRange：3 - 7，\r
品牌：SAL\r
\r
}，\r
{\r
类型：STOCK，\r
\r
伯爵：6，\r
ldocRange：3 - 7，\r
品牌：SAL\r
\r
}，\r
{\r
类型：STOCK，\r
\r
伯爵：13，\r
ldocRange：15+，\r
品牌：SAL\r
\r
}，\r
{\r
类型：STOCK，\r
\r
伯爵：2，\r
ldocRange：没有LDOC\r
品牌：SAL\r
\r
}，\r
{\r
类型：卖，\r
\r
伯爵：1，\r
ldocRange：8 - 14\r
品牌：SAL\r
\r
}，\r
{\r
类型：卖，\r
\r
伯爵：2，\r
ldocRange：15+，\r
品牌：SAL\r
\r
}，\r
{\r
类型：STOCK，\r
\r
伯爵：20，\r
ldocRange：8 - 14\r
品牌：SAL\r
\r
}\r
];\r
} \r
TR表TD {\r
边框：1px的纯黑色;\r
填充：5像素;\r
} \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
\r
＆LT; DIV NG-应用=对myApp＆GT;\r
＆LT;表NG-控制器=MyCtrl＆GT;\r
＆LT; TR NG重复=OBJ数据＆GT;\r
＆所述; TD＆GT; {{obj.type}}＆下; / TD＆GT;\r
＆所述; TD＆GT; {{obj.count}}＆下; / TD＆GT;\r
＆所述; TD＆GT; {{obj.ldocRange}}＆下; / TD＆GT;\r
＆所述; TD＆GT; {{obj.brand}}＆下; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; /表＆gt;\r
＆LT; / DIV＆GT; \r
[
{
"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"
}
]
Hi all, I am getting the above JSON from my rest service and want to display this result in a table using angularjs.My problem is I want to display the details in a table in a different way like below:- 0 1-2 3-7 8-14 15+ No LDOC Total STOCK SOLD
The data is dynamical ,it can vary in values. Please show me an approach. Thank you
I need to display in this table view
<table class="toggle-table">
<th style="background:none; border:0px;"> </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> </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>
解决方案
You can use the normal table syntax plus angular's ng-repeat directive to loop through your array until it suits your needs:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.data = [
{
"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"
}
];
}
table tr td {
border: 1px solid black;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<table ng-controller="MyCtrl">
<tr ng-repeat="obj in data">
<td>{{obj.type}}</td>
<td>{{obj.count}}</td>
<td>{{obj.ldocRange}}</td>
<td>{{obj.brand}}</td>
</tr>
</table>
</div>
这篇关于如何使用angularjs以表格的形式显示如下JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
