uiグリッド内のセルのクラス値またはスタイルを変更する

Question

私は、特定のテーブルの内容のセルに追加のクラスやスタイルルールが必要なuiグリッド内にいくつかのユニークなケースがあるため、他の人に。公式のui-gridドキュメントを見てみると、cellTemplateで行うことができますが、一貫した結果は得られませんでした。ここで最善のアプローチは何ですか？

以下の意図は、フィルタの呼び出しから返された値に基づいて、クラス名を変更することで、私が前に試みられてきたコードの変更は、「関連ドキュメント」から

//Define Grid Headings 
$scope.scheduledPatientAppointments = [ 
     { 
      field: 'appointment_date', 
      displayName: 'Appointment Date' 
     }, 
     { 
      field: 'doctor_name', 
      displayName: 'Doctor Name' 
     }, 
     { 
      field: 'procedure_type_eng', 
      displayName: 'Medical Procedure Type' 
     }, 
     { 
      field: 'appointment_status_eng', 
      displayName: 'Appointment Status' 
     }, 
     { 
      field: 'docs_received', 
      displayName: 'Related Documents', 
      cellTemplate: '<div class="ui-grid-cell-contents" ng-click="grid.appScope.loadDocumentsModal(\'{{row.entity.id}}\')">{{grid.getCellValue(row, col) | hasDocuments}}</div>', 
      cellFilter: 'hasDocuments', 
      cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) { 
       if (grid.getCellValue(row, col).toLowerCase() === 'missing') { 
        return 'missing'; 
       } else if (grid.getCellValue(row, col).toLowerCase() === 'received') { 
        return 'received'; 
       } else { 
        return 'undefined'; 
       } 
      } 
     } 
    ]; 

// Define Grid Options 
$scope.PatientAppointmentsGrid = { 
    selectionRowHeaderWidth: 25, 
    enableHorizontalScrollbar: false, 
    rowHeight: 35, 
    enableSorting: true, 
    columnDefs: $scope.columnsPatient, 
    data: [], 
    onRegisterApi: function (gridApi) { 
     $scope.gridApi = gridApi; 
    } 
};  

//Behavior for patient page load 
$scope.appointmentsProvider = patientsService.patientFactory.getAppointmentsForPatient($stateParams.id).then(
     function successCallback(response) { 
      var preFetchData = response.data.data; 
      angular.forEach(preFetchData, function (value, key) {documentsService.documentsFactory.getDocumentsByAppointmentId(value.id).then(
         function successCallback(response2) { 

          if (response2.data.length >= 1) { 
           //Append value state to the preFetchData object (count size) 
           var totalFiles = response2.data.length; 
           preFetchData[key].docs_received = totalFiles; 
          } else { 
           preFetchData[key].docs_received = 0; 
          } 
         }, function errorCallback(response2) { 
        console.debug("Error", response2); 
       }); 
      }); 

      $scope.PatientAppointmentsGrid.data = preFetchData; 
     }, 
     function errorCallback(response) { 
      console.debug("Error", response); 
     }); 

内容は作られていますinitallyあります（元の残りの呼び出しは何も返しませんが、フィルター呼び出しによってその呼び出しが設定されますが、後の呼び出しで行ごとに関連する文書が実際にロードされます）、この特定の呼び出しのグリッドの非アクティブは、ここに設定する

ここに最善のアプローチに関する考え方

Answer 1

cellTemplateでカスタムクラスを追加：

columnDefs: [ 
    { 
     name:'firstName', 
     field: 'first-name', 
     // adding custom class 
     cellTemplate: "<div class=\"ui-grid-cell-contents custom-class\" title=\"TOOLTIP\">{{COL_FIELD CUSTOM_FILTERS}}</div>" 
    }, 
    { name:'1stFriend', field: 'friends[0]' }, 
    { name:'city', field: 'address.city'}, 
    { name:'getZip', field: 'getZip()', enableCellEdit:false} 
    ], 
    ....... 

https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.9/ui-grid.js

の下部に$ templateCacheで定義された定義済みのカスタマイズ可能なテンプレートの多くがあるカスタムスタイルを追加：

....... 
onRegisterApi: function(gridApi){ 
    //set gridApi on scope 
    $scope.gridApi = gridApi; 
    // adding custom style 
    gridApi.grid.registerStyleComputation({ 
     func: function() { 
     return [ 
      '.custom-class {       ', 
      ' color: red;        ', 
      ' font-weight: bold;      ', 
      '}           ', 
      '.ui-grid-row:nth-child(1) .custom-class { ', 
      ' color: blue;       ', 
      '}           ' 
     ].join('\n'); 
     } 
    }); 
    } 

をプランナー：http://plnkr.co/edit/YbnYoWLlEYzwmjuKOFa0?p=preview