Change the MenuItem icon in angular ui.gird

Question

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

Answer 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