Datatable with 버튼은 angularjs 코드에서 숨기고 표시합니다.

Question

나는 angularjs를 처음 사용합니다. 나는 몇몇 json 데이터로 anglejs datatable을 구현하고있다. 사용자가 권한 (json에 저장되어있는 권한)을 가졌을 때마다 csv를 내보낼 수 있지만 사용자에게 권한이 없으면 datatable 내보내기 단추가 숨겨 지거나 표시되지 않는 문제가 있습니다. 나는 몇몇 기사를 googled 그러나 대답을 찾아 낼 수 없습니다. 당신의 소중한 시간을

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

감사합니다 - :

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 콘텐츠입니다 :

나는 데이터 테이블 버튼을 구현하는 코드 아래 사용.

Answer 1

권한이있는 사용자와없는 사용자를위한 두 세트의 단추를 관리해야합니다. 그것은 다음과 같이 수 : 변수로 .withButtons에서

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

간단히 포트 PARAMS. 그런 다음 초기화 자체가 원하여 사용자에 대한 관련 버튼을 만들 수 있습니다 여기에

.withButtons(permissions.asset_EDIT ? buttonsWithPermission : buttonsNoPermission) 

작은 데모입니다 permissions.asset_EDIT 변경 시도 :

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

주를 : 데모에서 vm 접근법을 사용하지 않으므로 혼동하지 말고 vm.permissions.asset_EDIT을 참조하십시오.게으른 프로그래머가 실수로 코드에 새로운 레이어를 추가하는 것 외에 vm 뒤에있는 개념을 실제로 이해 한 적이 없었습니다.

Answer 2

나는지지와 함께, 귀하의 경우 수출 버튼에, 당신은 당신의 코드에서 설정할 수 부울 변수 ng-show 태그 요소 태그를 추가하려고 할 것이다 : 뷰 모델에서 다음

<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 3

vm.showExportOption의 값에 따라 table 요소에 클래스를 추가 할 수 있습니다. 그런 다음 CSS Logic을 조금만 사용하여 부모 클래스에 특정 클래스가 있는지 여부에 따라 클래스를 타겟팅하여 정확한 버튼을 숨길 수 있습니다.

이

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

다음과 같은 CSS 무언가 : 표 요소에

:

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

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

이 기억이 - 복사 붙여 넣기하지만 당신에게를 제공하지 않는 것입니다

여기에 거친 아이디어 어떻게하는지에 대한 아이디어. 문제를 보여주기 위해 JSFiddle을 만들 수 있다면 기꺼이 포팅 할 것이지만 이것은 당신을 당신의 길로 인도 할 것입니다.