從JSON創建表

Question

我有這張桌子

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

該表僅顯示一行，其中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>

在這種情況下，您有一個三列表（根據需要添加/刪除列，並根據對象的屬性更改屬性