Question

我最近开始学习angular js。我有以下对象ResultRow：

ResultRow = function ( cars, prices) { //cars and prices are arrays
        this.prices = prices; 
        this.cars = cars;
};

例如，

ResultsRow=new ResultsRow(["Ford","Honda","Nissan"],[20,22,18]);

我想在表格中显示ResultsRow：

Car            Price
Ford            20
Honda           22
Nissan          18

所以基本上打印汽车[0]，价格[0]在一个表格行，汽车[1]，价格[1]在下一个表格行等等。

我尝试使用ng-repeat：

<tr>
   <td ng-repeat="car in ctrl.ResultsRow.cars">
   {{car}}
   </td>
   <td ng-repeat="car in ctrl.ResultsRow.prices">
   {{price}}
   </td>
</tr>

我很难弄清楚如何显示我想要的确切格式。任何帮助将不胜感激。

P.S。对于我来说，更改ResultRow的格式非常复杂，因为我在经过相当多的数据操作后生成它。

Answer 1

你应该创建一个具有属性的对象数组来迭代，而不是试图同时迭代两个单独的数组。

示例：

var row1 = {
    car: "Ford",
    price: 20
};
var row2 = {
    car: "Honda",
    price: 22
}; 
$scope.rows = [row1, row2];

然后在模板中：

<tr ng-repeat="row in rows">
    <td>{{row.car}}</td>
    <td>{{row.price}}</td>
</tr>

Answer 2

如果您想使用多维数组，那么我建议您使用new Array，如果您的汽车数组和价格数组内容符合规定，那么您可以这样做;

vm.ResultsRow=new Array(["Ford","Honda","Nissan"],[20,22,18]);

<tr  ng-repeat="car in vm.ResultsRow[0]">
     <td>
     {{car}}
     </td> 
     <td>
      {{vm.ResultsRow[1][$index]}}
     </td> 
</tr>

＆＃13;

angular.module("app",[])
.controller("ctrl",function($scope){
 var vm = this;
vm.ResultsRow=new Array(["Ford","Honda","Nissan"],[20,22,18]);
 

console.log(vm.ResultsRow)
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
 <table>
   <tr  ng-repeat="car in vm.ResultsRow[0]">
     <td>
     {{car}}
     </td> 
     <td>
      {{vm.ResultsRow[1][$index]}}
     </td> 
  </tr> 
 </table> 
</div>

＆＃13;

Answer 3

更改映射数据的功能，如下所示：

var repeatObject = new Array();
ResultRow = function ( cars, prices) { //cars and prices are arrays
    if(cars.length == prices.length) {
        for(let i in cars){
            this.repeatObject.push({'cars' : cars[i], 'prices' : prices[i]});
        }
    }
};

所以你可以使用＆＃39; ng-repeat＆＃39; ：

<tr ng-repeat="row in repeatObject">
  <td>{{row.car}}</td>
  <td>{{row.price}}</td>
</tr>

两个数组上的ng-repeat或类似的东西

3 个答案: