angularjs - ng-repeat 接收动态数据时在表格中垂直和水平重复
问题描述
我正在尝试在表格中显示数据。
行和列是动态的。
我想用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>
但它没有渲染thead
.
有什么解决办法吗?
解决方案
var 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>
推荐阅读
- javascript - 如何从 Form Extjs 6.0.2 中获取 DisplayField 的值?
- node.js - nodejs, mongodb 使用 forEach 查找并更新
- php - 更改文本以阅读更多内容和评论
- r - 如何每隔几行向我的数据框添加更多行
- c++ - 是否可以将 Lua 脚本修改为要求?
- ios - 无法将值保存到核心数据
- jquery - 如何在 MVC 应用程序中使用 Jquery 创建向导?
- python - TensorFlow 对象检测自定义数据集
- android - 如何在滑行中使用错误或占位符的图像数组
- javascript - 仅当过渡元素是组件中的根元素时才调用过渡钩子