Как отображать элементы массива в угловой таблице с двумя повторяющимися столбцами?

Question

У меня есть этот массив с объектами, которые имеют атрибуты значения времени, и я хотел бы отображать 2 пары в строке. Как следующее:

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

Что у меня есть:

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

Я уверен, что есть способ сделать это с угловой нг-повтора, но я не мог понять его еще ,

Answer 1

Если я правильно понимаю ваши требования правильно, вы можете использовать $index, чтобы получить другие элементы в ngRepeat кроме того, что в данный момент:

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>