Angular ng-repeat 在 HTML 表中打印数组值答案

【问题标题】：Angular ng-repeat to print array values in a HTML tableAngular ng-repeat 在 HTML 表中打印数组值
【发布时间】：2016-09-28 02:53:13
【问题描述】：

我的 app.js 文件中有一个数组，我想在我的 HTML 表中的<td> 行中按顺序打印其内容。下面是我的 app.js 文件：

(function () {
 var app = angular.module('TravelI', []);

var route = [{
    source : [
        "San Jose",
        "San Francisco",
    ],

    destination : [
        "Wellington",
        "Mumbai"
    ],


}];
app.controller('RouteController', function ($scope) {
    $scope.product = route;

    $scope.addRoute = function(s, d) {

    };

});

})();

HTML 代码：

<div id="DisplayTable" ng-repeat="x in product">
        <table style="width: 80%" align="center">
            <tr>
                <th>
                    From
                </th>
                <th>
                    To
                </th>
            </tr>
            <tr>
                <td>{{x.source[$index]}}</td>
                <td>{{x.destination[$index]}}</td>
            </tr>
        </table>
    </div>

现在我只能正确查看数组中第一个元素的数据。我希望显示是这样的：

From                         To:
San Jose                     Wellington
San Francisco                Mumbai

我附加到两个数组的任何城市都应该在表格行中按顺序显示。

目前我只能看到两个数组中的第一个元素：

【问题讨论】：

它只打印一行，因为您的 product.length 为 1。您必须遍历 product.source。

标签： javascript angularjs arrays angularjs-directive angularjs-scope

【解决方案1】：

您必须将 $scope.product 重新格式化为键值对，否则您可以这样做，假设它始终是两个值，

  <table style="width: 80%" align="center">
            <tr>
                <th>
                    From
                </th>
                <th>
                    To
                </th>
            </tr>
            <tr>
                <td>{{x.source[$index]}}</td>
                <td>{{x.destination[$index]}}</td>

            </tr>
            <tr>
                <td>{{x.source[$index+1]}}</td>
                <td>{{x.destination[$index+1]}}</td>

            </tr>
        </table>

编辑：

 <div id="DisplayTable" ng-repeat="x in product">
    <table style="width: 80%" align="center">
      <tr>
        <th>
          From
        </th>
        <th>
          To
        </th>
      </tr>
      <tr>
        <td ng-repeat="y in x.source">{{y}}</td>
      </tr>
      <tr>
        <td ng-repeat="y in x.destination">{{y}}</td>
      </tr>
    </table>
  </div>

DEMO

【讨论】：

是否可以在 HTML 页面中使用变量递增值，以便每次将新元素添加到数组中时，它也会反映在表格中。

【解决方案2】：

如果route.source.length === route.destination.length在你的路由中，你可以试试这个。

    (function () {
        var app = angular.module('TravelI', []);

        var route = [{
            source : [
                "San Jose",
                "San Francisco",
                "src A",
                "src B"
            ],

            destination : [
                "Wellington",
                "Mumbai",
                "des A",
                "des B"
            ]
        }];
        app.controller('RouteController', function ($scope) {
            $scope.product = route;

            $scope.addRoute = function(s, d) {

            };

        });

    })();

<!DOCTYPE html>
<html lang="en" ng-app="TravelI">
<head>
    <meta charset="UTF-8">
    <title>Angular Snippet</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
<div id="DisplayTable" ng-controller="RouteController">
    <table style="width: 80%" align="center" ng-repeat="x in product">
        <tr>
            <th>
                From
            </th>
            <th>
                To
            </th>
        </tr>
        <!-- I saw $scope.addRoute() has two arguments -->
        <!-- so, I assumed that source.length === destination.length -->
        <tr ng-repeat="src in x.source track by $index">
            <td>{{x.source[$index]}}</td>
            <td>{{x.destination[$index]}}</td>
        </tr>

    </table>
</div>
</body>
</html>

【讨论】：