각도 ui-grid - 동적으로 페이지 크기의 CSS 스타일이 변경됩니다.

Question

각도 ui-grid에서 페이지 크기가 변경 될 때 CSS 스타일을 동적으로 변경하는 방법은 무엇입니까? .

사용 사례는 로그인 한 사용자 유형에 따라 회색으로 편집/삭제를 표시하고 싶습니다. 서버 측에서 "row.entity.isEditable"플래그를 사용하면 ng-disabled가 설정되고 스타일이 기반으로 적용됩니다 비활성화 상태.

이것은 단발로 표시된 모든 행 (예 : 15)에서 완벽하게 작동합니다. 페이지 크기를 5 또는 10으로 변경하면 스타일이 제대로 렌더링되지 않습니다. 따라서 우리는 UI에서 부적절한 회색/색깔의 링크를보고 있습니다.

해결 방법을 알려주십시오. 아니면 다른 접근법이 있다면 알려주십시오.

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> 

<style type="text/css"> 
    a[disabled="disabled"] { 
     pointer-events: none; 
    } 
    span[disabled="disabled"] { 
     color: #a8a8a8 !important 
    } 
</style> 

    $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-disabled={{!row.entity.isEditable}} ng-click="grid.appScope.edit(row.entity.id)" class="btn-small btn-link"><span ng-disabled={{!row.entity.isEditable}} style="color:#80bb41;">edit</span> </a>' + 
       '<a ng-disabled={{!row.entity.isEditable}} ng-click="grid.appScope.delete(row.entity.id)" class="btn-small btn-link"> <span ng-disabled={{!row.entity.isEditable}} 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

은 나뿐만 아니라 내 사용자 지정 CSS에 문제가 있었지만 명시 적으로 데이터 변경이 notifyDataChange 이벤트가 발생했습니다 그리드에 통보하여 해결했다.

//use onRegisterApi to handle grid events 
$scope.gridUsers.onRegisterApi = function (gridApi) { 
    $scope.gridApi = gridApi; 

    //register an event for pagination 
    gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) { 

     //call notifyDataChange to tell the grid that data has changed 
     gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL); 
    }); 
};