角度 ui-grid 启用基于标志禁用行元素

Question

我正在使用角度 ui-grid 来显示数据库表（用户）中的行列表。 我正在做一个后端调用，NodeJS 从数据库中获取数据并返回。 此数据以角度 ui-grid 显示。

我想根据当前用户的可访问性启用或禁用几个 html 元素。、查看/编辑/删除。 如果当前用户是 ADMIN，则启用所有链接。如果他是 BASIC 用户，则启用 VIEW 并禁用 EDIT 和 DELETE。 项目可访问性也从服务器返回。我只需要检查这个标志并禁用/启用链接。 请告诉我，如何做到这一点？

id  name    actions
1   AAA     view edit delete 
2   BBB     view edit delete 
3   CCC     view edit delete 
4   DDD     view edit delete 

  <div class="box">
        <div class="box-content box-table">
            <div ui-grid="gridUsers" ui-grid-pagination>
            </div>
        </div>
  </div>


  $scope.gridUsers = {
            paginationPageSizes: [15, 30, 45],
            paginationPageSize: 15,
            enableColumnMenus: false,
            data: $scope.users,
            filterOptions: $scope.filterOptions,
            columnDefs: [{ field: 'id', displayName: 'Id', width: '20%'},
                { field: 'name', displayName: 'Name', width: '25%', enableFiltering: true},
                { name: 'Actions', displayName: 'Actions', width: '55%', cellTemplate:
                '<div class="grid-action-cell action-btns">'+
                '<span class="btn-small"><span style="color:#214c77;">view</span> </a>' +
                '<a ng-click="grid.appScope.edit(row.entity.id)" class="btn-small btn-link"><span style="color:#80bb41;">edit</span> </a>' +
                '<a ng-click="grid.appScope.delete(row.entity.id)" class="btn-small btn-link"> <span style="color:#e15829;">delete</span> </a>' 
                '</div>'}
            ]
        };


 Service.GetAllUsers(function (response) {
            if (response.length != 0) {
                $scope.users = response;
                $scope.gridUsers.data = $scope.users;
            }
        }); 

Answer 1

我有同样的问题。 为了解决它，我在检索列后调用了一个函数：

        function updateColumnsDefs() {
                columnsDefs
                        .forEach(function(column) {
                            switch (column.field) {
                                case 'status' :
                                    columnVal = '<span ng-if="c.' + column.filterBy + '">{{c.' + column.filterBy + '}}</span>';
                                    column.cellTemplate = '<div class="ui-grid-cell-contents">' + columnVal + '</span></div>';
                                    break;
                                default :
                                    break;
                            }
         }

看看我是如何使用ng-if 制作动态cellTemplate 的。

之后，我将更新后的columnsDefs 应用到gridOptions：

updateColumnsDefs();
vm.gridOptions = {
                    ...
                    columnDefs : columnsDefs,
                    ...
                };

如果使用延迟加载或过滤器，请注意。在这种情况下，请记住每次您的数据模型更改时都要调用updateColumnsDefs。