在角度u .gird中更改菜单项图标

How to toggle the customizing_column_menu icons in angular ui.grid like shown below

如何在角ui中切换customizing_column_menu图标。网格像如下所示

1 个解决方案

#1

I didn't found any best solution to change menuItems dynamically, Here is what I did for workaround

我没有找到任何动态更改菜单项的最佳解决方案，以下是我为解决这个问题所做的工作

Code

代码

$scope.gridOptions = {
  rowHeight: 75,
  columnDefs: [{
    field: 'name',
    enableColumnMenu: false
  }, {
    field: 'gender',
    enableHiding: false,
    suppressRemoveSort: true,
    sort: {
      direction: uiGridConstants.ASC
    }
  }, {
    field: 'All Details',
    cellTemplate: '<p ng-show="grid.appScope.company"><label><b>Company:</b></label><span>{{row.entity.company}}</span></p><p ng-show="grid.appScope.email"><label><b>email:</b></label><span>{{row.entity.email}}</span></p>',
    menuItems: [{
      title: 'Company',
      icon: 'ui-grid-icon-ok',
      action: function() {
        $scope.company = $scope.company ? false : true;
      },
      context: $scope,
      shown: function() {
        return this.context.company;
      }
    },{
      title: 'Company',
      icon: 'ui-grid-icon-cancel',
      action: function() {
        $scope.company = $scope.company ? false : true;
      },
      context: $scope,
      shown: function() {
        return !this.context.company;
      }
    }, {
      title: 'Email',
      icon: 'ui-grid-icon-ok',
      action: function() {
        $scope.email = $scope.email ? false : true;
      },
      context: $scope,
      shown: function() {
        return this.context.email;
      }
    }, {
      title: 'Email',
      icon: 'ui-grid-icon-cancel',
      action: function() {
        $scope.email = $scope.email ? false : true;
      },
      context: $scope,
      shown: function() {
        return !this.context.email;
      }
    }]
  }]
};

Working Plunkr

工作Plunkr