使用ng-repeat使用2x2数组数据的AngularJS动态表

问题描述

我有一个json结构，我试图将它绑定到表上，并且我正在尽我所能使用ng-repeats来避免样板代码。

我的json结构如下：

{ 
    "data": {
        "field1": 2809,"field2": {
            "10": [1,2,3,4,0],"20": [2,5,6,7,8,9,....
            "100": [2,0]
}

我正在尝试以这种方式自动生成表格，如下所示：

Field0 Field1 Field2 Field3 Field4 Field5 Field6 Field7 Field8 Field9 Field10
-----------------------------------------------------------------------------
10     1       2      3      4      3      0      0     0      0         13
20     2       3      4      5      6      7      8     9      0         44
...
100    2       3      4      5      6      7      8     9      0         44  

我不确定如何使ng-repeats正常工作

这是我正在使用的示例标记

<tr ng-repeat="nums in tabData.field2">
    <td ng-repeat="num in nums">
        {{ num[$index] }}
    </td>
</tr>         

如果执行此操作，表将完全损坏，并且仅在单行中得到[1，2 ... 0]。我不确定如果可以使用它，如何使它起作用。

我收到此错误

angular.js:15536 Error: [ngRepeat:dupes] 
http://errors.angularjs.org/1.7.5/ngRepeat/dupes? 
p0=degree%20in%20degrees&p1=number%3A0&p2=0
    at angular.js:99
    at angular.js:33721
    at angular.js:18963
    at m.$digest (angular.js:19103)
    at m.$apply (angular.js:19463)
    at k (angular.js:13312)
    at w (angular.js:13569)
    at XMLHttpRequest.E.onload (angular.js:13474) undefined

解决方法

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope) {
  $scope.tabData = {
    "data": {
      "field1": 2809,"field2": {
        "10": [1,2,3,4,0],"20": [2,5,6,7,8,9,"100": [2,0]
      }
    }
  };
});

td input {
  width: 35px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <table>
    <tr>
      <td ng-repeat="head in tabData.data.field2['10'] track by $index">
        Field{{ $index + 1 }}
      </td>
    </tr>
    <tr ng-repeat="(row,col) in tabData.data.field2 track by $index">
      <td ng-repeat="field in col track by $index">
        <input ng-model="tabData.data.field2[row][$index]" value="{{field}}" type="text" />
      </td>
    </tr>
  </table>
  <span>{{tabData}}</span>
</div>