NG-重複：繪製表基礎上的對象分組值

Question

我的JSON數據看起來是這樣的：

{'A': 'L', 'B': 'L', 'C': 'G', 'D': 'L', 'E': 'G', 'F': 'L' } 

我想提請表像這樣用NG-重複，

L G 
A C 
B E 
D 
F 

這裏，我根據values對keys進行分組。

這是我試過的，但我沒有得到我想要的。

<table class="table table-hover"> 
    <thead> 
    <tr> 
     <th>L</th> 
     <th>G</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="(key, val) in intlist track by $index"> 
     <td ng-if="val=='L'">{{ key }}</td> 
     <td ng-if="val=='K'">{{ key }}</td> 
    </tr> 
    </tbody> 
</table> 

Answer 1

地圖數據陣列的新數組，可重複的，那麼內部的重複每個細胞

var app = angular.module('angularTest', []); 
 

 
app.controller('MainCtrl', ['$scope', 
 
    function($scope) { 
 
    var data = {'A': 'L', 'B': 'L', 'C': 'G', 'D': 'L', 'E': 'G', 'F': 'L' }; 
 
    
 
    var tmp = {}; 
 
    // map values to arrays of keys in tmp 
 
    for (var key in data) { 
 
     if (!tmp[data[key]]) { 
 
     tmp[data[key]] = []; 
 
     } 
 
     tmp[data[key]].push(key); 
 
    } 
 
    // create array of headings from `tmp` keys 
 
    var headings = Object.keys(tmp); 
 
    // get longest array 
 
    var res = headings 
 
     .reduce(function(a, c) { 
 
      return tmp[c].length > a.length ? tmp[c] : a;   
 
     }, []) 
 
     // use longest to map results array 
 
     .map(function(_, i) { 
 
      // iterate headings 
 
      return headings.map(function(heading) { 
 
       // return array element if it exists or empty string   
 
       return tmp[heading][i] || ''; 
 
      }); 
 
     }); 
 

 
    $scope.headings = headings; 
 
    $scope.list = res; 
 

 
    } 
 
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script> 
 
<div ng-app="angularTest" ng-controller="MainCtrl"> 
 
    <h4>List Data</h4> 
 
    <pre>{{list}}</pre> 
 
    <h4>View Table</h4> 
 
<table class="table table-hover" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th ng-repeat="heading in headings">{{heading }}</th>   
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr ng-repeat="arr in list"> 
 
     <td ng-repeat="item in arr">{{item}}</td> 
 
    </tr> 
 

 
    </tbody> 
 
</table> 
 
</div>