Javascript 重复打印HTML表中的数组值

我的app.js文件中有一个数组，我想在HTML表的

行中按顺序打印其中的内容。 下面是我的app.js文件：

（函数（）{
var app=angular.module（'TravelI'，[]）；
var路由=[{
资料来源：[
“圣何塞”，
“旧金山”，
],
目的地：[
“惠灵顿”，
“孟买”
],
}];
应用控制器（'RouteController'，函数（$scope）{
$scope.product=路线；
$scope.addRoute=函数（s，d）{
};
});
})();

HTML代码：

从…起
到
{{x.source[$index]}
{{x.destination[$index]}

现在我只能正确地看到数组中第一个元素的数据。我希望显示器如下所示：

从到：
圣何塞惠灵顿
旧金山孟买

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

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

---

或者您必须将$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>

从…起
到
{{x.source[$index]}
{{x.destination[$index]}
{{x.source[$index+1]}
{x.destination[$index+1]}

编辑：

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

从…起
到
{{y}
{{y}

---

或者您必须将$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>

从…起
到
{{x.source[$index]}
{{x.destination[$index]}
{{x.source[$index+1]}
{x.destination[$index+1]}

编辑：

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

从…起
到
{{y}
{{y}

---

如果路线中的

route.source.length===route.destination.length

，您可以尝试此方法

（函数（）{
var app=angular.module（'TravelI'，[]）；
var路由=[{
资料来源：[
“圣何塞”，
“旧金山”，
“src A”，
“src B”
],
目的地：[
“惠灵顿”，
“孟买”，
“desa”，
“des B”
]
}];
应用控制器（'RouteController'，函数（$scope）{
$scope.product=路线；
$scope.addRoute=函数（s，d）{
};
});
})();

角片段
从…起
到
{{x.source[$index]}
{{x.destination[$index]}
如果您的路线中有
route.source.length===route.destination.length
，您可以尝试此方法


（函数（）{
var app=angular.module（'TravelI'，[]）；
var路由=[{
资料来源：[
“圣何塞”，
“旧金山”，
“src A”，
“src B”
],
目的地：[
“惠灵顿”，
“孟买”，
“desa”，
“des B”
]
}];
应用控制器（'RouteController'，函数（$scope）{
$scope.product=路线；
$scope.addRoute=函数（s，d）{
};
});
})();

角片段
从…起
到
{{x.source[$index]}
{{x.destination[$index]}
是否可以使用变量增加HTML页面中的值，以便每次向数组中添加新元素时，该值也会反映在表中。是否可以使用变量增加HTML页面中的值，以便每次向数组中添加新元素时，它也会反映在表中。它只打印一行，因为您的product.length为1。您必须循环使用product.source.It，因为您的product.length为1，所以它只打印一行。您必须循环使用product.source。