hide/show column dynamically with if conditionally in datatable AngularJS?

Question

I'm show the user list using datatable angularjs. I want to hide show column using conditionally.suppose role is onther then last column is not show and role is admin then show this last column.how can do that I don't know any one know how can fix it please let me know.

This is my controller.js:

app.controller("userscontroller", [
  "$scope", 
  "$http", 
  "DTOptionsBuilder", 
  "DTColumnBuilder", 
  "userservice",
  "$compile",
  function ($scope, $http, DTOptionsBuilder, DTColumnBuilder, userservic, $compile) {       
    $scope.dtColumns = [            
     DTColumnBuilder.newColumn("fullName", "Full Name").withOption('name','firstname'),
     DTColumnBuilder.newColumn("username", "Name").withOption('name','username'),
     DTColumnBuilder.newColumn("email", "Email").withOption('name', 'email'), 
     DTColumnBuilder.newColumn(null).withTitle('Action').notSortable().renderWith(function (data, type, full, meta) {            
       return '<button class="btn btn-primary" ng-click="delete(' + data.id + ');"><i class="fa fa-eye"></i>' + '</button>';                    
     })          
    ]

    $scope.dtOptions = userservice.GetAllUser(DTOptionsBuilder)
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withPaginationType('full_numbers')
    .withDisplayLength(50)
    .withOption('aaSorting', [3, 'desc'])

    function createdRow(row, data, dataIndex) {
     $compile(angular.element(row).contents())($scope);
    } 
  }
]);

Here I want to if(IsAdmin) then show delete column other wise hide this column how can do?

isAdmin is come from layout in <script> tag i m check and set globally isAdmin true and here i m check — coderwill
– coderwill, Commented Apr 11, 2017 at 10:15
If so, why don't you just protect with if(window.isAdmin) {xxx} the last DTColumnBuilder.newColumn ? — Julien TASSIN
– Julien TASSIN, Commented Apr 11, 2017 at 11:32

Julien TASSIN · Accepted Answer · 2017-04-11 12:54:28Z

Let's assume your isAdmin is set like so :

<script>window.__IS_ADMIN__ = <%=is_admin_from_server%></script>

You will have in window.__IS_ADMIN__ a boolean value that tells you if the connected user is admin. In your controller, you can check like this :

app.controller("userscontroller", [
  "$scope", 
  "$http", 
  "DTOptionsBuilder", 
  "DTColumnBuilder", 
  "userservice",
  "$compile",
  function ($scope, $http, DTOptionsBuilder, DTColumnBuilder, userservic, $compile) {       
    $scope.dtColumns = [            
     DTColumnBuilder.newColumn("fullName", "Full Name").withOption('name','firstname'),
     DTColumnBuilder.newColumn("username", "Name").withOption('name','username'),
     DTColumnBuilder.newColumn("email", "Email").withOption('name', 'email')
    ]; 
    // Bad practise to call directly window we should use $window or better a service
    if(window.__IS_ADMIN__) {
      $scope.dtColumns.push(DTColumnBuilder.newColumn(null).withTitle('Action').notSortable().renderWith(function (data, type, full, meta) {            
         return '<button class="btn btn-primary" ng-click="delete(' + data.id + ');"><i class="fa fa-eye"></i>' + '</button>';                    
      }));     
    }     

    $scope.dtOptions = userservice.GetAllUser(DTOptionsBuilder)
    .withOption('processing', true)
    .withOption('serverSide', true)
    .withPaginationType('full_numbers')
    .withDisplayLength(50)
    .withOption('aaSorting', [3, 'desc'])

    function createdRow(row, data, dataIndex) {
     $compile(angular.element(row).contents())($scope);
    } 
  }
]);

With this (pretty ugly) way you can have a conditionnal display of the last column.

Collectives™ on Stack Overflow

hide/show column dynamically with if conditionally in datatable AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related