2016-10-23 5 views
0

J'ai une grille angulaire avec une première ligne de colonne doit être montré comme un lien d'ancrage ou une étiquette basée sur une condition javascript de cette valeur de cellule ne commence pas par le caractère «M». Si la valeur de cellule de la colonne 1 commence par le caractère 'M', la colonne shpuld doit être une étiquette sinon elle devrait être un hyeprlink. Je crois que je dois utiliser deux modèles de cellules différents, mais je ne sais pas comment les appeler sur l'événement databind de ligne de uigrid. Voici le code.Les modèles de cellule basés sur la valeur de cellule

Modèles pour l'ancre et l'étiquette:

var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' + 
       ' <a class="text-blue-color text-underline" href="' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + '" target="_blank";">{{row.entity.TagNumber}}</a>' + 
       '</div>'; 
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' + 
       ' <label>{{row.entity.TagNumber}}</label>' + 
       '</div>'; 

est inférieure à la grille

 $scope.ComfortPlanGrid = { 
     enableGridMenu: true, 
     exporterMenuCsv: true, 
     exporterMenuPdf: false, 
     gridMenuShowHideColumns: true, 
     enableRowSelection: false, 
     enableColumnMenus: false, 
     enableFiltering: false, 
     enablePaging: false   

    }; 
    $scope.ComfortPlanGrid.columnDefs = config.headers.comfortPlansHeadersGrid; 

est sous la grille des en-têtes

var headers = { 
    comfortPlansHeadersGrid: [ 
     { field: 'TagNumber', width: 130, displayName: 'Claim Tag Nbr', cellTemplate: linkCellTemplate }, 
     { field: 'CustomerNumber', width: 200, displayName: 'Customer/Dealer' }, 
     { field: 'Status', width: 80, cellTooltip: true }, 
     { field: 'StatusDate', width: 175, displayName: 'Status Date' }, 
     { field: 'Description', displayName: 'Description', width: 270, cellTemplate: claimDetailTemplate }, 
     { field: 'ContractNumber', width: 200, displayName: 'Contract Number', headerTooltip: 'Contract Number' }, 
     { field: 'ServiceDate', width: 175, displayName: 'Service Date', headerTooltip: 'Service Date' } 
    ]}; 

Toute aide sur la façon d'y parvenir est appréciée.

+0

Am capable de acheive la validation en utilisant le dessous de modèle cellulaire, mais je voudrais appeler une autre fonction javascript pour la validation aussi à l'intérieur du celltemplate. Toutes les idées pour appeler une fonction javascript aussi dans le ng-if sont appréciées. – sam

+0

Code de modèle de cellule mis à jour: var linkCellTemplate = '

' + '' + '
' + '
'; – sam

Répondre

0

Essayez le code ci-dessous:

Ajouter le CellTemplate dans la COLDEF sur la colonne correspondante

cellTemplate: DisplayConditionalTemplate(value) 


function DisplayConditionalTemplate(value){ 
var linkCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">' +' <a class="text-blue-color text-underline" href="' + getURL() + '/ClaimDetail/Index?TagNumber={{row.entity.TagNumber}}&from=linkcomfort&Style=' + Style + '" target="_blank";">{{row.entity.TagNumber}}</a>' +     '</div>'; 
var labelCellTemplate = '<div class="ngCellText" ng-class="col.colIndex()">'+' <label>{{row.entity.TagNumber}}</label>' +     '</div>'; 

if(value.charAt(0) === 'M') 
    return labelCellTemplate; 
else 
    return linkCellTemplate; 
}