ng-repeatまたは2つの配列で同様のもの

Question

私は最近angular jsを学習し始めました。私のように、テーブルにResultsRowを表示する、例えば

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

を

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

：：私はオブジェクトResultRowを以下しているので、基本的には[0]、価格車を印刷

Car   Price 
Ford   20 
Honda   22 
Nissan   18 

[ 0]、次のテーブル行のcar [1]、price [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

2つの別々の配列を同時に反復しようとするのではなく、反復するプロパティを持つオブジェクトの配列を作成する必要があります。

例：テンプレートで次に

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>