我能够逐行填写内容。但是,我想知道如何用两列填充表格。我希望它按列填充而不重复内容。基本上,它应该返回一个包含两行和两列的表格。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">
<table align=center>
<tr>
<td>{{x}}</td>
<td>{{x}}</td>
</tr>
</table>
</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro comercial Moctezuma",
"Ernst Handel",
]
});
</script>
</body>
</html>
最佳答案
在 AngularJS 中,数据主要以 JSON 形式进行操作,并以数组数据结构的形式收集。
从 API 或服务调用获取数据,并将数据转换为适当的对象数组,然后可以轻松地将数据分配给表列,并使用“ng-repeat”将记录值分配给表的每一行“在 AngularJS 中。
在下面的代码中,您可以看到“ng-repeat”和“x inrecords”用作循环遍历数据值记录并分配给表。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">
<table align=center>
<tr>
<td>{{x.name}}</td>
</tr>
<tr>
<td>{{x.location}}</td>
</tr>
</table>
</h1>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
{"name":"Alfreds Futterkiste", "location":"avenue1"},
{"Berglunds snabbköp", "location":"avenue2"},
{"name":"Centro comercial Moctezuma", "location":"avenue3"},
{"name":"Ernst Handel", "location":"avenue4"},
]
</script>
</body>
</html>
关于javascript - 使用 ng-repeat 在 Angular js 中填充表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42475852/