Multiples ng-repeat für Populationstabelle

Question

Ich versuche, die gleiche Tabelle mit Werten aus verschiedenen Scope-Variablen zu füllen. A und B haben immer die gleiche Länge. 4

2 - - 5

3 -

A -

1 B:

$scope.a = [1,2,3] 
 
$scope.b = [4,5,6]

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>A</th> 
 
     <th>B</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr ng-repeat="itemA in a, itemB in b"> <!-- How should be this ng-repeat?--> 
 
     <td>{{itemA}}</td> 
 
     <td>{{itemB}}</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Das Ergebnis ist eine Tabelle sein sollte 6

Answer 1

Wenn wir davon ausgehen, dass die beiden Array wird immer die gleiche Länge haben:

<table> 
    <thead> 
    <tr> 
     <th>A</th> 
     <th>B</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="itemA in a track by $index"> 
     <td>{{itemA}}</td> <!--Could also be a[$index] --> 
     <td>{{b[$index]}}</td> 
    </tr> 
    </tbody> 
</table> 

Alle Das Array verfolgt und indexiert und verwendet diesen Index, um das erforderliche Element in B abzurufen.

Answer 2

würde ich die beiden Arrays machen und die Eigenschaften wie so Zugang:

$scope.items = [{ 
    a: 1, 
    b: 4  
}, { 
    a: 2, 
    b: 5  
}, { 
    a: 3, 
    b: 6  
}] 

<tr ng-repeat="item in items"> 
    <td>{{item.a}}</td> 
    <td>{{item.b}}</td> 
</tr> 

Answer 3

ng-repeat fügt dem inneren Bereich einige spezielle Werte hinzu, einschließlich $index, mit dem Sie den entsprechenden Wert von b referenzieren können.

<tr ng-repeat="itemA in a"> 
    <td>{{ itemA }}</td> 
    <td>{{ b[$index] }}</td> 
</tr> 

Außerhalb der Vorlage, können Sie die Arrays zusammen mit so etwas wie lodash's _.zip function zip:

$scope.combinedArray = _.zip(a, b); // [[ 1, 4 ], [ 2, 5 ], [ 3, 6 ]]