Angularjs 角度ui网格基于标志启用禁用行元素

Angularjs 角度ui网格基于标志启用禁用行元素,angularjs,angular-ui-grid,Angularjs,Angular Ui Grid,我使用AngularUI网格显示数据库tableUsers中的行列表。 我正在做一个后端调用,NodeJS从DB获取数据并返回。 此数据显示在角度ui网格中 我想启用或禁用一些html元素,根据当前用户的可访问性查看/编辑/删除。 如果当前用户是ADMIN,则所有链接都已启用。如果他是基本用户,则启用视图,禁用编辑和删除。 项目可访问性也从服务器返回。我只需要检查此标志并禁用/启用链接。 请让我知道,怎么做 id name actions 1 AAA view edit de

我使用AngularUI网格显示数据库tableUsers中的行列表。 我正在做一个后端调用,NodeJS从DB获取数据并返回。 此数据显示在角度ui网格中

我想启用或禁用一些html元素,根据当前用户的可访问性查看/编辑/删除。 如果当前用户是ADMIN,则所有链接都已启用。如果他是基本用户,则启用视图,禁用编辑和删除。 项目可访问性也从服务器返回。我只需要检查此标志并禁用/启用链接。 请让我知道,怎么做

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;
            }
        }); 
我也有同样的问题。 为了解决此问题,我在检索列后调用了一个函数:

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

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

谢谢。我是否需要在$scope.gridUsers定义之后编写updateColumnsDefs定义?函数位置并不重要。唯一重要的是必须在$scope.gridUsers初始化之前调用updateColumnsDefs函数。我的vm.gridOptions相当于您的$scope.gridUsers.Ok。我只需要移动我需要启用/禁用属性的列。对吗?请注意,我使用了forEach。正如我所做的,您可以构建一个开关盒,用于按字段名过滤列。感谢Giaffa,当我有20行并将页面大小更改为5时,这不起作用。移动到下一页时,不会应用更改。
updateColumnsDefs();
vm.gridOptions = {
                    ...
                    columnDefs : columnsDefs,
                    ...
                };