How to add dynamic column to ng table using complex object or json?

Question

I have the following code for an 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 need to specify the age and country of the name in the column. but using this code, I can see the name, age and address object not in the country. Please suggest me how to display only country or country.

Answer 1

I have a solution on this: see plunker

replace the above html code as follows:

  <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 a subfield in $scope.columns to the specific column in which you want to display a subfield similar to 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' } ];