我正在尝试在表格中显示数据。
行和列是动态的。
我想用
ng-repeat我正在接收这种形式的数据：
headers: [
0: {"heading1"},
1: {"heading2"},
2: {"heading3"}
]
data: [
0:{ id:1, code:"Barry" , description:"Allen" }
1:{ id:2, code:"Naruto" , description:"Uzumaki" }
2:{ id:3, code:"Hannah" , description:"Montana" }
]
我试过这个方法：
<thead>
<tr>
<td ng-repeat="c in headersData">
{{c}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in columnData">
<td>{{c.id}}</td>
<td>{{c.code}}</td>
<td>{{c.description}}</td>
</tr>
</tbody>
但它没有渲染
theadvar app = angular.module('testApp',[])
app.controller('MainController',function($scope) {
$scope.headersData = [
"heading1",
"heading2",
"heading3"
];
$scope.columnData = [
{ id:1, code:"Barry" , description:"Allen" },
{ id:2, code:"Naruto" , description:"Uzumaki" },
{ id:3, code:"Hannah" , description:"Montana" }
] ;
});<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js@*" data-semver="4.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js">
</script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<table>
<tr>
<th ng-repeat="th in headersData">{{th}}</th>
</tr>
<tr ng-repeat="x in columnData">
<td>{{x.code}}</td>
</tr>
</table>
</body>
</html>当您收到像 headers 中那样的数组时，您必须为键和值对定义一个 var 名称。试试这个：
<thead>
<tr>
<td ng-repeat="(key,c) in headersData">
{{c}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in columnData">
<td>{{c.id}}</td>
<td>{{c.code}}</td>
<td>{{c.description}}</td>
</tr>
</tbody>
首先这是一种错误的做法。 有一种方法可以使用
ng-repeat="(key,value) in yourjson所以先检查一下。
并且您的标头不应该以这种方式声明。或者换句话说，不应该以这种方式呈现。你正在做
c in headers{heading1 }所以做一些类似的事情，
ng-repeat="x in headers"并将标题定义为
headers= ["heading1","heading2","heading3"]要检查 JSON 的有效性，您可以查看 JsonLint。
在我的例子中，它重复
<tr><th><th>不工作
<thead>
<tr *ngFor="let item of tableColumns">
<th>{{ item }}</th>
</tr>
</thead>
工作
<thead>
<tr>
<th *ngFor="let item of tableColumns">{{ item }}</th>
</tr>
</thead>