angularjs NgTable ng-repeat groupby with show/hide

Question

I can't get the 'groupBy' working. I have a data set returned from a $http factory. The data is passed to the $scope 'territoryReq' variable. the data set looks like:

[{"Country":"Netherlands","Name":"firstName lastName","Phone":"+12345678","Mobile":"+987654321"},{"Country":"Netherlands","Name":"firstName2 lastName2","Phone":"+12345678","Mobile":"+987654321"}]

I have a simple 'dump' of the data by using:

<div>
    <table ng-table="" class="table table-condensed table-bordered table-hover">
        <tr class="ng-table-group" ng-repeat="entries in territoryReq">
            <td>
                {{entries.Country}}
            </td>
            <td>
                {{entries.Name}}
            </td>
            <td>
                {{entries.Phone}}
            </td>
            <td>
                {{entries.Mobile}}
            </td>
        </tr>
    </table>
</div>

This is all working. No problem. Now I want to have the results grouped by Country. Preferably by being able to click on the country which then unhides the rows with the correct country. I was looking at the example of example of ng-table with grouping

But I can't get it working for my data.. In the example they use e.g. group in $groups but I can't figure out where $groups come from? Anyway, I hope someone can help me in the right direction...

thanks!

Answer 1

For straight up grouping, groupBy takes an object property as the parameter. It should be as simple as

<tr class="ng-table-group" ng-repeat="entries in territoryReq | groupBy: 'Country'">

But it sounds more like you want to filter the list based on criteria, like country.

I mocked this up to demonstrate what I think you're looking for. Please take a look and see if it helps... It has ordering via the table headers and filtering from a dynamic list of countries.

https://stackblitz.com/edit/angularjs-yvxdrd