Skip to main content
more complete answer
Source Link
doroshko
  • 754
  • 5
  • 16

Following will works for your data structure, but Dmitry's version above is better for data structure and output.:

<table class="table">
  <thead><tr>
      <th>Finishing Position</th>
      <th ng-repeat="(key, value) in payoutStructure">{{key}}</th>
  </tr></thead>
  <tbody>
    <tr ng-repeat="key in payoutStructure['2-4']">
      <th scope="row">{{$index +1}}</th>
      <td>{{payoutStructure['2-4'][$index+1]}}</td>
      <td>{{payoutStructure['6-7'][$index+1]}}</td>
    </tr>
  </tbody>
</table>
 
But better one if you change data structure as following:
(function(angular) {
  'use strict';
  angular.module('ngRepeat', [])
    .controller('repeatController', function($scope) {
      $scope.payouts = {
        '2-4': [100],
        '6-7': [65, 35],
        '8-5': [50, 30, 20],
        '10-18': [40, 30, 20, 10],
        '18-45': [38, 25, 16, 10, 6, 5]
      };
      
      $scope.maxArray = [];

      angular.forEach($scope.payouts, function(value, key) {
        if (value.length > $scope.maxArray.length)
          $scope.maxArray = value;
      });
      
    });
})(window.angular);

Here is $scope.maxArray where we write payout with max data array length. And now you can output it with ng-repeat:

<table class="table">
  <thead><tr>
      <th>Finishing Position</th>
      <th ng-repeat="(key, value) in payouts">
        {{key}}
      </th>
  </tr></thead>
  <tbody>
    <tr ng-repeat="key in maxArray track by $index">
      <th scope="row">{{$index + 1}}</th>
      <td ng-repeat="payout in payouts">
        {{payout[$parent.$index]}}
      </td>
    </tr>
  </tbody>
</table>

Result on plunker: http://plnkr.co/edit/ZvO1cllByPhKKPfsI07Z?p=previewhttp://plnkr.co/edit/n5BfCtqjUKJ7LxvtxIFp?p=preview


And official API docs for ngRepeat directive: https://docs.angularjs.org/api/ng/directive/ngRepeat

Following will works for your data structure, but Dmitry's version above is better for data structure and output.

<table class="table">
  <thead><tr>
      <th>Finishing Position</th>
      <th ng-repeat="(key, value) in payoutStructure">{{key}}</th>
  </tr></thead>
  <tbody>
    <tr ng-repeat="key in payoutStructure['2-4']">
      <th scope="row">{{$index +1}}</th>
      <td>{{payoutStructure['2-4'][$index+1]}}</td>
      <td>{{payoutStructure['6-7'][$index+1]}}</td>
    </tr>
  </tbody>
</table>

Result on plunker: http://plnkr.co/edit/ZvO1cllByPhKKPfsI07Z?p=preview

Following will works for your data structure:

<table class="table">
  <thead><tr>
      <th>Finishing Position</th>
      <th ng-repeat="(key, value) in payoutStructure">{{key}}</th>
  </tr></thead>
  <tbody>
    <tr ng-repeat="key in payoutStructure['2-4']">
      <th scope="row">{{$index +1}}</th>
      <td>{{payoutStructure['2-4'][$index+1]}}</td>
      <td>{{payoutStructure['6-7'][$index+1]}}</td>
    </tr>
  </tbody>
</table>
 
But better one if you change data structure as following:
(function(angular) {
  'use strict';
  angular.module('ngRepeat', [])
    .controller('repeatController', function($scope) {
      $scope.payouts = {
        '2-4': [100],
        '6-7': [65, 35],
        '8-5': [50, 30, 20],
        '10-18': [40, 30, 20, 10],
        '18-45': [38, 25, 16, 10, 6, 5]
      };
      
      $scope.maxArray = [];

      angular.forEach($scope.payouts, function(value, key) {
        if (value.length > $scope.maxArray.length)
          $scope.maxArray = value;
      });
      
    });
})(window.angular);

Here is $scope.maxArray where we write payout with max data array length. And now you can output it with ng-repeat:

<table class="table">
  <thead><tr>
      <th>Finishing Position</th>
      <th ng-repeat="(key, value) in payouts">
        {{key}}
      </th>
  </tr></thead>
  <tbody>
    <tr ng-repeat="key in maxArray track by $index">
      <th scope="row">{{$index + 1}}</th>
      <td ng-repeat="payout in payouts">
        {{payout[$parent.$index]}}
      </td>
    </tr>
  </tbody>
</table>

Result on plunker: http://plnkr.co/edit/n5BfCtqjUKJ7LxvtxIFp?p=preview


And official API docs for ngRepeat directive: https://docs.angularjs.org/api/ng/directive/ngRepeat
Source Link
doroshko
  • 754
  • 5
  • 16

Following will works for your data structure, but Dmitry's version above is better for data structure and output.

<table class="table">
  <thead><tr>
      <th>Finishing Position</th>
      <th ng-repeat="(key, value) in payoutStructure">{{key}}</th>
  </tr></thead>
  <tbody>
    <tr ng-repeat="key in payoutStructure['2-4']">
      <th scope="row">{{$index +1}}</th>
      <td>{{payoutStructure['2-4'][$index+1]}}</td>
      <td>{{payoutStructure['6-7'][$index+1]}}</td>
    </tr>
  </tbody>
</table>

Result on plunker: http://plnkr.co/edit/ZvO1cllByPhKKPfsI07Z?p=preview