如何使用 ng-repeat 在表格中显示数组

Question

与其他 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> 

编辑：- 数据在表格中显示垂直时出错 enter image description here

新数据：-

$scope.land = [ 'tiger in zoo', 'tiger in jungle', 'zebra'];
 $scope.water = [ 'fish in pond'];

Answer 1

我认为您正在尝试将两个数组的元素并排显示（如果我错了，请纠正我）。

这是一个简单的方法：

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] : ''
      });
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl">
  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="col">LAND</th>
        <th scope="col">WATER</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in combined">
        <td>{{item.land}}</td>
        <td>{{item.water}}</td>
      </tr>
    </tbody>
  </table> 
</div>