UI-Grid-列没有更改按钮

时间:2016-09-05 09:43:25

标签: angular-ui-grid ui-grid

我使用ui-grid显示表格。

最后一列将有3个按钮。

页脚中会有另一个按钮"更改表格",点击哪个网格选项会发生变化而不是显示3个按钮,它应该显示1个按钮,它应该删除"描述&# 34;列。

当用户点击按钮时,"描述"列已被删除但按钮列未刷新。

它仍然显示3个按钮而不是1.

Below is the jsFiddle link:   
    http://jsfiddle.net/ag3Lc1fz/  

请帮忙

1 个答案:

答案 0 :(得分:0)

没有直接的方法可以做到这一点。但是你可以使用$ scope变量来隐藏和显示如下的按钮。

 $scope.oneColumn = false;

    $scope.gridOptions = {
        excludeProperties: '__metadata',
        enablePaginationControls: false,
        useExternalSorting: true,
        useExternalFiltering: true,
        enableFiltering: true,
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;

        }
    };

    $scope.gridOptions.columnDefs = [
        { name: 'name', enableCellEdit: false, displayName: 'Name', width: '20%' },
        { name: 'type', displayName: 'Type', enableCellEdit: false, width: '20%' },
        { name: 'description', displayName: 'Description', width: '30%' },
                { name: 'id', displayName: '', width: '30%', cellTemplate: '<div class="ui-grid-cell-contents" title="TOOLTIP">' +
                      '<button class="material-icons noOutline" >1</button>' +
                      '<button data-ng-show="!grid.appScope.oneColumn"  class="material-icons noOutline" >2</button>'+
                      '<button  data-ng-show="!grid.appScope.oneColumn" class="material-icons noOutline" >3</button>'+
                      '</div>' }
      ];

    $scope.toggleColumn = function() {
        $scope.oneColumn = !$scope.oneColumn;
  }

http://jsfiddle.net/uvo9zoo0/2/,请查看。