angular ui-grid enableフラグに基づいてロー要素を無効にする

Question

私は、テーブルui-gridを使用して、データベーステーブル（ユーザー）からの行のリストを表示しています。 私はバックエンドコールを行い、NodeJSはDBからデータをフェッチして戻ります。 このデータは角度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を作った方法を探してください。その後

、私はgridOptionsに更新columnsDefsを適用します。

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

遅延ローディングやフィルタを使用する場合は注意を払う必要があります。その場合、データモデルが変更されるたびにupdateColumnsDefsを呼び出すことを覚えておいてください。