Question

我正在开发一个数据驱动的应用程序，其中列（表头）根据用户点击动态更新。我正在从JSON文件加载数据。

当我使用带有ng-repeat =“gridHeaders中的标题”＆gt; {{heading}}的普通表时，它可以工作，但是当我包含ui-grid并且使用不同的数据集更新视图时，网格单元格变为空，列标题保持静态。如何在ui-grid中更新列定义？

这是JSFiddle http://jsfiddle.net/masoom/svcxh6hu/7/

controllers.js

$scope.gridOptions = {
    data: 'grid',
   columnDefs : '' /* not sure how to use the <ng-repeat="heading in gridHeaders"> {{ heading}} here*/
};

 /* 
 Watch for the change in the Tree's current node. 
 When user clicks on a node, $scope.currentNode will update
 */
$scope.$watch(function () {
    return $scope.currentNode;
}, function () {
    $scope.displayGrid(angular.fromJson($scope.currentNode.json));
});

/*
Sets the Grid's data model. The view will update when this is called.
*/
$scope.displayGrid = function (data) {
    $scope.grid = data;
    $scope.gridHeaders = new Array();
    if (typeof data != 'undefined') {
        for (var key in data[0]) {
            $scope.gridHeaders.push(key);
        }
    }
}

的index.html

<table ui-grid="{ data: grid }" class="grid1" ng-show="gridHeaders.length>0" >

                <thead>
                    <tr>
                       <th ng-repeat="heading in gridHeaders">{{ heading }}</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="obj in grid">
                    <td ng-repeat="heading in gridHeaders">{{ obj[heading]      }}</td>
                    </tr>
                </tbody>
        </table>
 <div ui-grid="gridOptions" class="grid1" ng-show="gridHeaders.length>0" >    
          </div>

Answer 1

$scope.gridHeaders1 =  [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}];            
 $scope.gridHeaders2 =  [{field: 'name', displayName: 'Name'}, {field:'age', displayName:'Age'}, {field:'occupation', displayName:'Occupation'}];  
$scope.gridOptions = { 
    data: 'myData',
    columnDefs: 'gridHeaders1'
};

Answer 2

这个问题表明，更改gridOptions.columnDefs将更新网格中的列，但是将新对象或数组分配给columnDefs不会影响因为那样你将失去对api中对象的引用。 How to update the columnDef of an angular ui-grid column dynamically

我没有找到任何有用的刷新，但是使用这种方法你不需要调用refresh（）。

UI Grid AngularJS - 如何更新ui-grid中的列标题？

2 个答案: