带按钮的数据表在 angularjs 代码中隐藏和显示

Question

我是 angularjs 的新手。我正在用一些 json 数据实现一个 angularjs 数据表。我遇到一个问题，每次如果用户有权限（存储在 json 中）可以导出 csv 但当用户没有权限时，数据表导出按钮被隐藏或不显示。我用谷歌搜索了一些文章，但找不到答案。

我使用下面的代码来实现数据表按钮：

vm.dtOptions = DTOptionsBuilder.fromSource('')
  .withFnServerData(serverData)
  .withOption('createdRow', createdRow)
  .withDataProp('data')
  .withOption('order', [0, 'desc'])
  .withOption('processing', true)
  .withOption('serverSide', true)
  .withOption('headerCallback', function(header) {
    if (!vm.headerCompiled) {
      // Use this headerCompiled field to only compile header once
      vm.headerCompiled = true;
      $compile(angular.element(header).contents())($scope);
    }
  })
  .withPaginationType('full_numbers')

  .withOption('lengthMenu', [
    [10, 50, 100, 200, 500, -1],
    [10, 50, 100, 200, 500, "All"]
  ])
  .withButtons([
    {
      className:'fa fa-upload',
      key: '1',
      action: function (e, dt, node, config) {
        vm.openImportFileDialog();
      }
    },
    {
      action:function () {
        if (!vm.permissions.assets_EDIT) {
          alert('You have no permission to download file.')
        }
      },
      extend: "csv",
      text:' Export(CSV)',
      className:'fa fa-download',
      exportOptions: {
        columns:[0,1,2,3,4,5,6]
      },
      exportData: {decodeEntities:true}
    },
    {
      className:'fa fa-exchange p-left-5',
      text:' Export(HTML)',
      // enabled: false,
      action:function () {
          vm.openNewTab();
      }
    }

  ])
  .withBootstrap();

这是我的html内容：-

 <table  datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" dt-instance="vm.dtInstance"
                   class="row-border hover">
            </table>

感谢您的宝贵时间。

Answer 1

我会尝试添加一个 ng-show 标签元素标签，在你的例子中是导出按钮，带有一个支持 Boolean 变量，你可以在你的代码中设置它：

<table ng-show="!vm.dtIsHidden" datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns" dt-instance="vm.dtInstance"
               class="row-border hover">
        </table>

然后在您的视图模型中，使用正确的逻辑设置此值：

 vm.dtIsHidden = whatever;

这应该可以解决您的问题。

Answer 2

根据 say vm.showExportOption 的值，您可以将 class 添加到父 table 元素。然后，通过一些 CSS 逻辑，您可以根据某个 class 是否存在于其父项上来定位其 class 来隐藏确切的按钮。

大致思路如下：

在 Table 元素上：

ng-class="vm.showExportOption ? 'show-export' : 'hide-export'"

然后在 CSS 中：

table.show-export .fa-exchange{
  display:block;
}

table.hide-export .fa-exchange{
  display:none;
}

请记住，这不是复制粘贴，而是让您了解如何执行此操作。如果您可以创建一个 JSFiddle 来显示您的问题，我会很乐意移植它，但这应该会让您顺利进行。

Answer 3

您应该管理两组按钮，一组用于有权限的用户，另一组用于没有权限的用户。它可能看起来像这样：

var buttonsNoPermission = [{ extend: 'colvis' }];
var buttonsWithPermission = [{ extend: 'colvis' }, { extend: 'csvHtml5' }];

只需将参数从 .withButtons 移植到变量。然后你可以在初始化本身中通过三元组为用户创建相关按钮：

.withButtons( permissions.asset_EDIT ? buttonsWithPermission : buttonsNoPermission)

这里有一个小demo，试试改permissions.asset_EDIT :

http://plnkr.co/edit/s6lainDw4eQC9zaoZGdG?p=preview

注意：我在演示中没有使用vm方法，所以不要混淆，请在您自己的代码中参考vm.permissions.asset_EDIT。从来没有真正理解 vm 背后的概念，此外，它是懒惰的程序员无意中为他们的代码添加新的复杂层的一种方式:)

带按钮的数据表在 angularjs 代码中隐藏和显示

Datatable withbutton hide and show in angularjs code

javascript

angularjs

angular-datatables