javascript - 更改 Angular ui.grid 中的 MenuItem 图标

Question

如何在 Angular ui.grid 中切换 customizing_column_menu 图标，如下所示

Answer 1

我没有找到任何动态更改菜单项的最佳解决方案，这是我为解决方法所做的

代码

$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