how to add dynamic column in ng-table using complex object or json?

Question

i have following code for ng-table:see plunker

var app = angular.module('main', ['ngTable']).
    controller('DemoCtrl', function($scope, $filter, ngTableParams) {
        var data = [{name: "Moroni", age: 50,address:{coun:'USA',state:'sd'}},
            {name: "Tiancum", age: 43,address:{coun:'UK',state:'sda'}},
           ];
        $scope.columns = [
            { title: 'Name', field: 'name', visible: true, filter: { 'name': 'text' } },
            { title: 'Age', field: 'age', visible: true },
            { title: 'country', field: 'add', visible: true }
        ];
        $scope.tableParams = new ngTableParams({
            page: 1,            // show first page
            count: 10,          // count per page
            filter: {
                name: 'M'       // initial filter
            }
        }, {
            total: data.length, // length of data
            getData: function($defer, params) {
                // use build-in angular filter
                var orderedData = params.sorting() ?
                        $filter('orderBy')(data, params.orderBy()) :
                        data;

                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });
    })

and HTML:

       <tr ng-repeat="user in $data">
            <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field">
                {{user[column.field]}}
            </td>
       </tr>

i have to display name age and country in column. but using this code i can see name ,age and address object not country. please suggest me how to display only country or state.

Brilliantine

Answer 1

i got the solution for this question : see plunker

replace above html code with this:

    <tr ng-repeat="user in $data">
        <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field">
            {{user[column.field][column.subfield] || user[column.field]}}
        </td>
    </tr>

add subfield in to $scope.columns in a particular column in which you want to display subfield like this like this:

$scope.columns = [
                { title: 'Name', field: 'name', visible: true, filter: { 'name': 'text' } },
                { title: 'Age', field: 'age', visible: true },
                { title: 'country', field: 'add', visible: true,subfield:'coun' }
            ];

Brilliantine

I have created a new plunker that yours is not working: plnkr.co/edit/lO8FhO?p=preview – Leeth

It works OK to list subfields, but how do you manage to filter by those same subfields? (i.e. filtering by country in this example) – Frantic