在数据表AngularJS中有条件地隐藏/显示列?

时间:2017-04-11 09:17:51

标签: angularjs datatable

我使用数据表angularjs显示用户列表。我想隐藏显示列使用conditionally.suppose角色是onther然后最后一列不显示和角色是管理员然后显示最后一列。我可以做到这一点我不知道任何人知道如何解决它请告诉我。

这是我的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);
    } 
  }
]);

这里我想if(IsAdmin)然后显示删除列其他明智隐藏此列怎么办?

1 个答案:

答案 0 :(得分:1)

我们假设您的isAdmin设置如下:

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

您将在window.__IS_ADMIN__中有一个布尔值,告诉您连接的用户是否为admin。 在您的控制器中,您可以这样检查:

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);
    } 
  }
]);

通过这种(非常丑陋的)方式,您可以显示最后一列的条件。