Winkel ui-Gitter ermöglichen Element disable flag Zeilen basierend auf

Question

I Winkel ui-grid verwenden Tabelle zu zeigen Liste von Zeilen von der Datenbank (Benutzer). Ich mache einen Back-End-Aufruf und NodeJS holt die Daten von DB und kehrt zurück. Diese Daten werden im angularen UI-Grid angezeigt.

Ich mag einige HTML-Elemente aktivieren oder deaktivieren., View/edit/Löschen auf der Grundlage der Zugänglichkeit des aktuellen Benutzers. Wenn der aktuelle Benutzer ADMIN ist, sind alle Links aktiviert. Wenn er BASIC-Benutzer ist, ist VIEW aktiviert und EDIT und DELETE sind deaktiviert. Projektzugänglichkeit wird ebenfalls vom Server zurückgegeben. Ich muss nur dieses Flag überprüfen und die Links deaktivieren/aktivieren. Bitte lassen Sie mich wissen, wie man das macht?

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

Ich hatte das gleiche problema. Um es zu lösen, rufe ich eine Funktion nach dem Abrufen Spalten:

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

Sehen Sie, wie ich ein dynamisches cellTemplateng-if mit gemacht.

Danach gelten ich die aktualisierte columnsDefs zu gridOptions:

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

Sie Aufmerksamkeit, wenn die Verwendung verzögertes Laden oder Filter bezahlen sollte. Denken Sie in diesem Fall daran, sich jedes Mal, wenn sich Ihr Datenmodell ändert, an updateColumnsDefs zu erinnern.