从 json 创建表答案

【问题标题】：Creating table from json从 json 创建表
【发布时间】：2015-08-17 15:33:42
【问题描述】：

我有这张桌子

<table class="table">
    <tr>
    <td ng-repeat="(k, obj) in items | orderBy:'key'">{{obj.key}}</td>
  </tr>
</table>

这显示了一个只有一行的表，其中 json ($scope.items) 中的所有项目按键值的字母顺序排列。

有没有什么办法让它有固定数量的列，多于一行，并保持按键值排序？

【问题讨论】：

把ng-repeat放在<tr>上-然后，每个<td>可以包含items的属性，每个属性都有单独的<td>s（例如）

标签： javascript json angularjs angularjs-ng-repeat

【解决方案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 个 td。

【讨论】：

这就是我想要的！即使它对值进行排序是从上到下和从左到右，而不是从左到右和从上到下，就像顶部的这个表：jsfiddle.net/4wyaayc0。我会试着理解你是如何做到的，使它看起来像底部的表格。

【解决方案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 标签内的标签。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

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

【讨论】：