我有一个json结构，我试图绑定到一个表，并且我正在尽我最大的努力使用ng-repeats来避免样板代码。
我的json结构如下：
{
"data": {
"field1": 2809,
"field2": {
"10": [1, 2, 3, 4, 3, 0, 0, 0, 0],
"20": [2, 3, 4, 5, 6, 7, 8, 9, 0],
....
"100": [2, 3, 4, 5, 6, 7, 8, 9, 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, 3, 0, 0, 0, 0],
"20": [2, 3, 4, 5, 6, 7, 8, 9, 0],
"100": [2, 3, 4, 5, 6, 7, 8, 9, 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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句