angularjs - 如何在运行时动态禁用/隐藏 ui-grid 列菜单项

Question

如何有条件地禁用/隐藏列的菜单项？

Answer 1

$scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', enableColumnMenu: false },
      { field: 'gender', enableHiding: false, suppressRemoveSort: true, sort: { direction: uiGridConstants.ASC } },
      {
        field: 'company',
        menuItems: [
          {
            title: 'Outer Scope Alert',
            icon: 'ui-grid-icon-info-circled',
            action: function($event) {
              this.context.blargh(); // $scope.blargh() would work too, this is just an example
            },
            context: $scope
          },
          {
            title: 'Grid ID',
            action: function() {
              alert('Grid ID: ' + this.grid.id);
            }
          },
          {
            title: 'Column Title Alert',
            shown: function () {
              return this.context.col.displayName === 'Company';
            },
            action: function() {
              alert(this.context.col.displayName);
            }
          }
        ]
      }
    ]
  };

您可以自定义列的菜单并提供您自己的功能。每个菜单项可以有：

• shown: 决定是否显示项目的函数
• title：您希望为菜单项显示的标题（请注意，您也可以通过gridMenuTitleFilter设置在此上使用 i18n）
• icon：您希望在项目旁边显示的图标
• action: 单击菜单时将调用的函数
• active：突出显示项目的功能（提供切换类型效果 - 参见列菜单上的排序示例）
• context：默认情况下action，shown和active's' 上下文将引用作为属性添加的网格grid（可通过 访问this.grid。您可以通过将属性提供给菜单项来传递您自己的上下文context。它将通过this.context.