gpt4 book ai didi

AngularJS 从数组创建表格

转载 作者:行者123 更新时间:2023-12-01 13:47:19 24 4
gpt4 key购买 nike

我有一个项目数组,我想将它呈现为一个包含 2 列的表格。

我做了基本的实现,它只用一列渲染。有什么建议吗?

<body ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat="i in items">
<td>{{i}}</td>
</tr>
</table>
</body>


var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
$scope.items = ["12", "22", "34", "657", "129"];
});

https://jsfiddle.net/nkarri/9czrqLny/1/

最佳答案

这是因为您的 HTML 只有一个 <td>元素,你没有重复。由于只有 1 个,因此您只会得到 1 列。你需要有一个嵌套的 ng-repeat<td>元素以获得多于 1 列,或明确有两个 <td>在您的 HTML 中定义的元素。

您可以尝试编写更复杂的内容来尝试确定何时应创建新列或行,但我会通过将数组创建为更易于使用的内容来简化事情:本质上是一个 2-维数组。这是我会做的:

<body ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<tr ng-repeat="row in items">
<td ng-repeat="column in row">{{column}}</td>
</tr>
</table>
</div>
</body>
var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
$scope.items = [];
$scope.items[0] = ["12", "22"];
$scope.items[1] = ["34", "657"];
$scope.items[2] = ["129", null];
});

https://jsfiddle.net/bntguybm/

请注意,如果这些数组中的任何一个包含超过 2 个值,那么您还会看到包含该数据的行的额外列。

另一种方法是这样的,它只能保证 2 列。您需要为 items 创建一个对象数组目的。像这样:

<body ng-app="myApp">
<div ng-controller="myCtrl">
<table>
<tr ng-repeat="row in items">
<td>{{row.column1}}</td>
<td>{{row.column2}}</td>
</tr>
</table>
</div>
</body>
var myApp = angular.module("myApp", []);

myApp.controller("myCtrl", function($scope) {
$scope.items = [];
$scope.items[0] = {};
$scope.items[0].column1 = "12";
$scope.items[0].column2 = "22";
$scope.items[1] = {};
$scope.items[1].column1 = "34";
$scope.items[1].column2 = "657";
$scope.items[2] = {};
$scope.items[2].column1 = "129";
$scope.items[2].column2 = null;
});

https://jsfiddle.net/6v1701gx/1/

关于AngularJS 从数组创建表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34973654/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com