Question

我有这张桌子

form

它显示了一个只有一行的表，其中json（$ scope.items）中的所有项按键值按字母顺序排序。

有没有办法让它具有固定数量的列，多行并且不断按键值排序？

Answer 1

你需要父索引和切片数组每隔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>

在此示例中声明变量var howMany = 6，因此每行将有6个tds。

Answer 2

尝试这个小提琴让自己开始

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>

简短的回答是肯定的。您需要更改使用ng-repeat的方式。它不会重复包含在其中的标记，只重复ng-repeat标记内的标记。

Answer 3

这将显示固定数量的列并保持排序。

<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>

Answer 4

将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>

在这种情况下，您有一个三列表（根据需要添加/删除列，并根据对象的属性更改属性

从json创建表

4 个答案: