Angular：從json地圖繪製表格

我嘗試創建一個像Full Tilt Payout Structure這樣的表格。我決定創建下圖：Angular：從json地圖繪製表格

$scope.payoutStructure = { 
    '2-4': { 
     1: 100, 
     2: 0, 
     3: 0, 
     4: 0, 
     5: 0, 
     6: 0, 
    }, 
    '6-7': { 
     1: 65, 
     2: 35, 
     3: 0, 
     4: 0, 
     5: 0, 
     6: 0, 
    } 
}

等等...

但我無法弄清楚如何呈現它。如果我沒有記錯，起初我也呈現頭這樣的：

<thead> 
    <tr> 
    <th><strong>Position \ Entries</strong></th> 
    <th ng-repeat="key in payoutStructure.keys()">{{key}}</th> //I'm not sure about .keys(), because they are not render in order as I know        
    </tr> 
</thead>

但我不能得到如何使TBODY。好像我有使用數組而不是地圖，但我希望通過像鑰匙中獲取價值：

{{payoutStructure[entries]['1']}}

來源

2016-03-05 Feeco

的NG-重複文檔解釋語法渲染對象 – charlietfl

1頭），你應該呈現像

<tr> 
    <th ng-repeat="(key,value) in payoutStructure">{{key}}</th> 
</tr>

2）作爲TBODY - 它通過行（而不是列）呈現，所以你的結構應該遵循這個結構。

它可以是水木清華這樣的：

$scope.payoutStructure = ['2-4','6-7','8-9', '10-18', '18-45']; 
    $scope.payoutData = [ 
     [100, 65, 50, 40, 38], 
     [0, 35,30,30,25] 
    ] 

    <table class="table"> 
     <tr> 
     <th ng-repeat="header in payoutStructure">{{header}}</th> 
     </tr> 
    <tr ng-repeat="row in payoutData"> 
     <td ng-repeat="value in row track by $index" >{{value}} </td> 
    </tr> 
    </table>

來源

2016-03-05 21:55:59 DicBrus

以下將適用於你的數據結構：

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

但是，如果你改變的數據結構如下更好的：

(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);

這是$scope.maxArray我們在哪裏用最大數據數組長度寫入支付。現在你可以用ng-repeat輸出它： http://plnkr.co/edit/n5BfCtqjUKJ7LxvtxIFp?p=preview

和官方的ngRepeat指令API文檔：

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

上plunker結果 https://docs.angularjs.org/api/ng/directive/ngRepeat

來源

2016-03-05 22:06:58 doroshko

Angular：從json地圖繪製表格

回答

相關問題