如何让ng-table表头不固定

Question

问题描述

使用ng-table去展现后段查询出来的数据，这些数据的特点就是 乱, 表是用户自己创建的，列也是用户自己创建的，这个时候的查询在开发阶段是不可能知道表头的.

相关代码

(angular.module('routerApp').controller('demoController', ['$scope', '$location', '$stateParams', 'NgTableParams',
    function ($scope, $location, $stateParams, NgTableParams) {
        const id = $stateParams.id;
        if (id === null || id === undefined) {
            location.href = 'index.html';
            return;
        }
        const self = this;
        self.cols = [{
            field: "name",
            title: "Name",
            filter: {
                name: "text"
            },
            sortable: "name",
            dataType: "text"
        }, {
            field: "age",
            title: "Age",
            filter: {
                age: "number"
            },
            sortable: "age",
            dataType: "number"
        }, {
            field: "money",
            title: "Money",
            filter: {
                money: "number"
            },
            sortable: "money",
            dataType: "number"
        }, {
            field: "action",
            title: "",
            dataType: "command"
        }];

        const simpleList = [
            {name: 'chen1', age: 214, money: 1234},
            {name: 'chen2', age: 224, money: 2234},
            {name: 'chen3', age: 234, money: 3234},
            {name: 'chen4', age: 244, money: 4234},
            {name: 'chen5', age: 214, money: 1234},
            {name: 'chen6', age: 224, money: 2234},
            {name: 'chen7', age: 234, money: 3234},
            {name: 'chen8', age: 244, money: 4234},
            {name: 'chen9', age: 214, money: 1234},
            {name: 'chen10', age: 224, money: 2234},
            {name: 'chen11', age: 234, money: 3234},
            {name: 'chen12', age: 244, money: 4234}
        ];

        const originalData = angular.copy(simpleList);
        self.tableParams = new NgTableParams({}, {
            filterDelay: 0,
            dataset: angular.copy(simpleList)
        });
        self.cancel = cancel;
        self.del = del;
        self.save = save;

        //取消
        function cancel(row, rowForm) {
            const originalRow = resetRow(row, rowForm);
            angular.extend(row, originalRow);
        }

        //删除
        function del(row) {
            _.remove(self.tableParams.settings().dataset, function (item) {
                return row === item;
            });
            self.tableParams.reload().then(function (data) {
                if (data.length === 0 && self.tableParams.total() > 0) {
                    self.tableParams.page(self.tableParams.page() - 1);
                    self.tableParams.reload();
                }
            });
        }

        function resetRow(row, rowForm) {
            row.isEditing = false;
            rowForm.$setPristine();
            self.tableTracker.untrack(row);
            return _.findWhere(originalData, function (r) {
                return r.id === row.id;
            });
        }

        function save(row, rowForm) {
            const originalRow = resetRow(row, rowForm);
            angular.extend(originalRow, row);
        }
    }
]));

代码copy自 ng-table 官网. http://ng-table.com/#/editing/demo-inline

你期待的结果是什么？实际看到的错误信息又是什么？

当然是期待表头，表数据跟随后段返回的数据格式相变化。

Answer 1

双重repeat

<div ng-controller="pipelineCtrl as pipe">
    <table ng-table="pipe.tableParams" class="table table-hover table-condensed table-bordered table-striped"
           disable-filter="demo.isAdding">
        <tr ng-repeat="head in header">
           <td ng-repeat="ddd in head">
            {{ddd}}
           </td>
        </tr>
        <tr ng-repeat="(key,value) in $data" ng-form="rowForm" demo-tracked-table-row="row">

           <td ng-repeat="vvv in value">
               {{vvv}}
           </td>
            <!--<td>{{user.date}}</td>-->
            <!--<td>{{user.ddd}}</td>-->
        </tr>
    </table>
</div>