如何在两个重复列的角度表中显示数组的元素?

时间:2017-02-21 22:38:40

标签: javascript angularjs html-table

我的这个数组包含具有时间值属性的对象,我希望每行显示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>

我很确定有一种方法可以用角度ng-repeat来做到这一点,但我还是想不通。

1 个答案:

答案 0 :(得分: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>