How to display elements of an array in angular table with two repetitive columns?

Question

I have this array with objects which has time-value attributes, and I would like to display 2 pairs per row. Like following:

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

What I have:

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

I am pretty sure there is a way to do it with angular ng-repeat but I couldn't figure it out yet.

My apologies, just edited the question

Mustafa Bereket
– Mustafa Bereket

2017-02-21 22:45:45 +00:00
Commented Feb 21, 2017 at 22:45 — Mustafa Bereket
– Mustafa Bereket, Commented Feb 21, 2017 at 22:45

K Scandrett · Accepted Answer · 2017-02-22 00:11:35Z

If I understand your requirements correctly, you can use $index to get other elements in the ngRepeat other than the one it is currently on:

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>

Collectives™ on Stack Overflow

How to display elements of an array in angular table with two repetitive columns?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related