javascript - 使用 ng-repeat 在 Angular js 中填充表格

标签 javascript html angularjs

我能够逐行填写内容。但是,我想知道如何用两列填充表格。我希望它按列填充而不重复内容。基本上,它应该返回一个包含两行和两列的表格。

enter image description here

<!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/

相关文章:

javascript - 如何将地址链接转换为单击时更改页面的按钮?

html - css 框不滚动

javascript - 有没有办法让子 Controller 从其父 Controller 继承服务 "like"实例?

javascript - angularjs - a::是什么意思?

javascript - angularjs ngIf 的类型错误问题

javascript 文件对象在 cookie 中存储/检索

javascript - IE 中的 XMLHttpRequest.responseURL

JavaScript 多重继承和 instanceof

html - CSS定位?

html - 如何在jquery的html()函数中添加间距?