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

debugcn 发表于 Dev

菜鸟编码器

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

编辑：- 在表格中显示垂直的数据错误在 此处输入图像描述

新数据：-

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。