[英]Creating table from json
I have this table 我有这张桌子
<table class="table">
<tr>
<td ng-repeat="(k, obj) in items | orderBy:'key'">{{obj.key}}</td>
</tr>
</table>
That shows a table of only one row with all the items in the json ($scope.items) ordered alphabetically by the key value. 该表仅显示一行,其中json($ scope.items)中的所有项目均按键值按字母顺序排列。
Is there any way to make it so that it has a fixed number of columns, more than one row and keeps being sorted by the key value? 有什么办法可以使它具有固定的列数,多于一行并始终按键值进行排序?
You need the parent index and slice up array put a tr every X times 您需要父索引和切片数组每X次放入tr
<table class="table">
<tr ng-repeat="trs in items" ng-if="$index % howMany == 0" ng-init="pIdx=$index">
<td ng-repeat="(k, obj) in items.slice(pIdx,pIdx+howMany) | orderBy:'key'">{{obj.key}}</td>
</tr>
</table>
In this example declare a variable var howMany = 6
so it will have 6 tds every row. 在此示例中,声明变量
var howMany = 6
因此每行将有6个tds。
Try this fiddle to get yourself started 试试这个小提琴让自己开始
https://jsfiddle.net/U3pVM/17932/ https://jsfiddle.net/U3pVM/17932/
<table class="table" ng-controller="tstCtrl">
<tr ng-repeat="(k, obj) in items | orderBy:'key'">
<td>{{k}}</td>
<td>{{obj.name}}</td>
<td>{{obj.type}}</td>
</tr>
</table>
The short answer is yes. 简短的答案是肯定的。 You need to change how you are using ng-repeat.
您需要更改ng-repeat的使用方式。 It does not repeat the tag it is contained within, only the tags inside the ng-repeat tag.
它不会重复包含在其中的标签,只会重复ng-repeat标签内的标签。
This will show a fixed number of columns and remain sorted. 这将显示固定数量的列并保持排序。
<table class="table">
<tr>
<th>Key</th>
<th>Other Property</th>
</tr>
<tr ng-repeat="(k, obj) in items | orderBy:'key'">
<td>{{obj.key}}</td>
<td>{{obj.otherProperty}}</td>
</tr>
</table>
Add the ng-repeat
to the <tr>
- like: 将
ng-repeat
添加到<tr>
-如:
<table class="table">
<tr ng-repeat="(k, obj) in items | orderBy:'key'">
<td>{{obj.key}}</td>
<td>{{obj.propertyOne}}</td>
<td>{{obj.propertyTwo}}</td>
</tr>
</table>
In this case, you have a three column table (add/remove columns as you wish and change the properties depending on your objects's properties 在这种情况下,您有一个三列表(根据需要添加/删除列,并根据对象的属性更改属性
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.