如何使用ng-repeat在表中显示数组
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何使用ng-repeat在表中显示数组相关的知识，希望对你有一定的参考价值。
与其他JSON数据不同，我有两个简单的数组。
$scope.land = [ elephant, tiger, zebra ];
$scope.water = [ fish , octopus, crab];
我想使用ng-repeat将数组放在表中。我试过了，但数据没有以正确的格式显示。
<table class="table table-dark">
<thead>
<tr>
<th scope="col">LAND</th>
<th scope="col">WATER</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="l in land track by $index">
<td>{{l}}</td>
<td>fish</td>
</tr>
</tbody>
</table>
编辑： - 表qazxsw poi中显示垂直的数据错误
新数据 ：-
enter image description here
答案
我想你试图显示两个阵列的元素彼此相邻（如果我错了，请纠正我）。
这是一个简单的方法：
$scope.land = [ 'tiger in zoo', 'tiger in jungle', 'zebra'];
$scope.water = [ 'fish in pond'];
angular.module('myApp', [])
.controller('TestCtrl', function ($scope) {
$scope.land = [ 'tiger in zoo', 'tiger in jungle', 'zebra'];
$scope.water = [ 'fish in pond'];
$scope.combined = [];
var maxLength = ($scope.land.length > $scope.water.length) ? $scope.land.length : $scope.water.length;
//length is to be determined
for(var index = 0; index < maxLength ; index++) {
$scope.combined.push({
land: ($scope.land[index]) ? $scope.land[index] : '',
water: ($scope.water[index]) ? $scope.water[index] : ''
});
}
})以上是关于如何使用ng-repeat在表中显示数组的主要内容，如果未能解决你的问题，请参考以下文章
如何在带有ng-repeat的角度js表中使用复选框数组和文本区域/下拉列表数组？