Wie Elemente eines Arrays in einer eckigen Tabelle mit zwei sich wiederholenden Spalten angezeigt werden?

Question

Ich habe dieses Array mit Objekten, die Zeit-Wert-Attribute hat, und ich möchte 2 Paare pro Zeile anzeigen. Wie folgt vor:

<table> 
     <tr> 
      <td>pair1</td> <td>pair4</td> 
     </tr> 
     <tr> 
      <td>pair2</td> <td>pair5</td> 
     </tr> 
     <tr> 
      <td>pair3</td> <td>pair6</td> 
     </tr> 
</table> 

Was ich habe:

<tbody ng-if="reportCtrl.mainArr"> 
         <tr ng-repeat="item in reportCtrl.mainArr | limitTo:reportCtrl.rowLimit"> 
          <td> 
           {{item.value.toFixed(2)}} 
          </td> 
          <td> 
           <span>{{item.time | amDateFormat:'MM.DD.YYYY HH:mm:ss'}}</span> 
          </td> 
         </tr> 

Ich bin ziemlich sicher, dass es eine Möglichkeit, es mit Winkel ng-repeat zu tun ist, aber ich konnte es noch nicht herausfinden .

Answer 1

Wenn ich Ihre Anforderungen richtig verstehen, können Sie $index verwenden andere Elemente in der ngRepeat anderen zu bekommen als die, die es aktuell ist:

var app = angular.module('app', []); 
 

 
app.controller('ctrller', function() { 
 
    
 
    this.mainArr = [{'value': 1, 'time': '1pm'}, 
 
        {'value': 2, 'time': '2pm'}, 
 
        {'value': 3, 'time': '3pm'}, 
 
        {'value': 4, 'time': '4pm'}, 
 
        {'value': 5, 'time': '5pm'}, 
 
        {'value': 6, 'time': '6pm'}]; 
 
    this.rowLimit = 3; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="ctrller as reportCtrl"> 
 

 
    <table> 
 
    <tbody ng-if="reportCtrl.mainArr"> 
 
     <tr ng-repeat="item in reportCtrl.mainArr | limitTo:reportCtrl.rowLimit"> 
 
     <td> 
 
      {{reportCtrl.mainArr[$index].value.toFixed(2)}} 
 
     </td> 
 
     <td style="padding-right: 20px"> 
 
      <span>{{reportCtrl.mainArr[$index].time }}</span> 
 
     </td> 
 
     <td> 
 
      {{reportCtrl.mainArr[$index + reportCtrl.rowLimit].value.toFixed(2)}} {{ $index }} 
 
     </td> 
 
     <td> 
 
      <span>{{reportCtrl.mainArr[$index + reportCtrl.rowLimit].time }}</span> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>