Question

我使用angular ui-grid来显示数据库表（Users）中的行列表。我正在进行后端调用，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;
                            }
         }

了解我如何使用cellTemplate制作动态ng-if。

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

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

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

angular ui-grid enable基于flag禁用row元素

1 个答案: