ng-repeat或兩個陣列上類似的東西

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> 

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

 
console.log(vm.ResultsRow) 
 
})

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

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

所以，你可以使用 'NG-重複'：

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