在angular-ui-grid中设置动态列时出现问题

I'm trying to setup a angular-ui-grid with x columns depending on how many objects view.trend.getTagsList() returns. $scope.addData() is a functions that invokes once every three seconds

我正在尝试使用x列设置一个angular-ui-grid,具体取决于view.trend.getTagsList()返回多少个对象。 $ scope.addData()是一个每三秒调用一次的函数

        $scope.columns = [];


        $scope.setGridColumnWidth = function () {
            return (100 / view.trend.getTagsList().length + 1) + '%';
        }

        $scope.redoColumns = function () {

            $scope.columns = [];
            $scope.columns.push({
                displayName: 'TimeStamp', field: 'x', width: $scope.setGridColumnWidth(), sort: {
                    direction: uiGridConstants.DESC,
                    priority: 1
                }
            });

            for (var i = 0; i < view.trend.getTagsList().length; i++)
                $scope.columns.push({ displayName: view.trend.getTagsList()[i].getTitle(), field: 'y' + view.trend.getTagsList()[i].getId(), width: $scope.setGridColumnWidth() });
        }


        $scope.addData = function () {

            if (view.trend.getTagsList().length > $scope.columns.length) {
                $scope.redoColumns();
            }

            $scope.tslab_grid.data = view.trend.getTagsList()[0].getData();
        };

        $scope.tslab_grid = {
            enableGridMenu: true,
            enableColumnResizing: true,
            enableRowSelection: true,
            multiSelect: false,
            enableRowHeaderSelection: false,
            paginationPageSizes: 18,
            paginationPageSize: 18,
            enableVerticalScrollbar: 0,
            enableHorizontalScrollbar: 2,
            columnDefs: $scope.columns,
            data: null
        };

Now as test I only try to fetch a single object view.trend.getTagsList()[0] with its list of data .getData() which contains a list of { x: Date, y: value }.

现在作为测试我只尝试获取单个对象view.trend.getTagsList()[0]及其数据列表.getData(),其中包含{x:Date,y:value}的列表。

My question is why doesn't angular-ui-grid rewrite the columns as in $scope.redoColumns()? I get displayNames to 'X' and 'Y' in chrome instead of TimeStamp and whatever view.trend.getTagsList()[i].getTitle() is. Also want to add that there's no 'default' sorting on field: 'x' either.

我的问题是为什么angular-ui-grid不像$ scope.redoColumns()那样重写列?我将displayNames设置为chrome中的'X'和'Y',而不是TimeStamp和view.trend.getTagsList()[i] .getTitle()。还想添加字段上没有'默认'排序:'x'。

2 个解决方案

#1

Try this:

$scope.redoColumns = function () {
    var c = [];
    c.push({
        displayName: 'TimeStamp', field: 'x', width: $scope.setGridColumndWidth(), sort: {
            direction: uiGridConstants.DESC,
            priority: 1
        }
    });

    for (var i = 0; i < view.trend.getTagsList().length; i++)
        c.push({ displayName: view.trend.getTagsList()[i].getTitle(), field: 'y' + view.trend.getTagsList()[i].getId(), width: $scope.setGridColumnWidth() });

    $timeout(function(){
        $scope.columns = c;
    }, 0);
}

#2

I solved it by just removing the $scope.columns = []; in redoColumn function

我只是删除了$ scope.columns = [];在redoColumn函数中