ng-repeat: визуализация таблицы на основе группирования значений в объекте

Question

ng-repeat: визуализация таблицы на основе группирования значений в объекте

0

Мои данные json выглядят примерно так:

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

Я хочу рисовать таблицу, как это, используя ng-repeat,

L   G
A   C
B   E
D
F

Здесь я группирую keys на основе values.

Это то, что я пробовал, но я не понимаю, чего хочу.

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

ramesh 23 июль 2016, в 21:03

Источник

0

Я не понял твою логику .. можешь объяснить?
developer033 23 июль 2016, в 18:49
0

Основываясь на значении, я хочу сгруппировать ключи
ramesh 23 июль 2016, в 18:57

Теги:

angularjs

json

1 ответ

Ещё вопросы

Я не понял твою логику .. можешь объяснить?
Основываясь на значении, я хочу сгруппировать ключи

charlietfl · Accepted Answer · 2016-07-23T17-12-00.000Z

Отобразите данные в новый массив массивов, которые можно повторить, затем повторите внутри, что для каждой ячейки

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>

Какое хорошее решение, мне было любопытно увидеть ответ на эту проблему. +1 :)
@ developer033 спасибо ... более сложная проблема, чем кажется на первый взгляд
Да, я тоже пытался решить, но все оказалось намного сложнее, чем я думал.