如何使用复杂对象或json在ng-table中添加动态列?

时间:2014-09-21 11:31:42

标签: javascript json angularjs ngtable

我有以下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()));
            }
        });
    })

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

我必须在列中显示姓名年龄和国家/地区。但使用此代码我可以看到姓名,年龄和address对象而不是国家/地区。请建议我如何只显示国家或州。

1 个答案:

答案 0 :(得分:7)

我得到了这个问题的解决方案:see plunker

用以下代码替换上面的html代码:

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

将子域添加到特定列中的$scope.columns,在该列中您要像这样显示子字段:

$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' }
            ];