Grouping rows in ngrepeat

Question

I have json array and i want to create table from this and want to give a heading which is an element of array. Here is fiddle showing the scenario.

 <div ng-repeat="products in items"> 
    <div>{{products.IDTYPE}}</div>
    <div>
        <table border=1>
            <thead>
                <th>primkey</th>
                <th>userid</th>
            </thead>
            <tbody>
                <tr>
                    <td>{{products.PRIMKEY}}</td>
                    <td>{{products.USERID}}</td>
                </tr>
            </tbody>
        </table>    
    </div>

This will create simple table with heading from the IDTYPE . But i want to group the rows with unique IDTYPE. So desired table will be as shown in this link.

So i tried adding a ng-show condition ng-show="$index==0 || items[$index-1].IDTYPE!=items[$index].IDTYPE" but it doesn't work properly as tbody and table will be constructed for every row.This is what i have tried.

So how to generate the table as i desired in the above description?

Answer 1

If you do not wish to change your source data structure to fit better to what you need, you may have to write some extra code to change it from the javascript side. Something like:

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

function MyCtrl($scope) {
    $scope.items = [...]; //your original data

    // Here the transformation begins...
    $scope.newItems = {};

    for (var i = 0; i < $scope.items.length; i++) {
        // We'll make it look like a map
        // Each IDTYPE will have an array associated to it
        if (!$scope.newItems[$scope.items[i].IDTYPE]) {
            $scope.newItems[$scope.items[i].IDTYPE] = [];
        }
        $scope.newItems[$scope.items[i].IDTYPE].push($scope.items[i]);
    }
}

From the HTML side, you just have to read accordingly to your new data:

<div ng-repeat="products in newItems">
    <div>{{products[0].IDTYPE}}</div>
    <div>
        <table border=1>
            <thead>
                <th>primkey</th>
                <th>userid</th>
            </thead>
            <tbody>
                <tr ng-repeat="productItem in products">
                    <td>{{productItem.PRIMKEY}}</td>
                    <td>{{productItem.USERID}}</td>
                </tr>
            </tbody>
        </table>    
    </div>
</div>

Fiddle: http://jsfiddle.net/5mpgzdem/