Griglia UI angolare: aggiunta di campi personalizzati in columnDefs e accesso dal modello di intestazione

Question

Desidero aggiungere un campo personalizzato in columnDefs e voglio accedervi dal modello di intestazione. A titolo di esempio, voglio un let campo dire showfile

$scope.gridOptions.columnDefs = [ 
     {     
       name: 'ServiceID', 
       displayName: 'Service', 
       showFile: some data 
     }] 

e desidera accedere showfile all'interno modello di intestazione ...

<div class="ui-grid-top-panel" style="text-align: center"> 
     {{ want to access 'showFile' }} 
</div> 

Qual è il modo migliore per farlo. Come ho provato utilizzando il metodo personalizzato come

<div class="ui-grid-top-panel" style="text-align: center"> 
{{grid.appScope.letter()}} 
</div> 

(collegamento plnkr http://plnkr.co/edit/ZW43LsiLY7GdnX6XEOgG?p=preview, http://plnkr.co/edit/3E8HTz4Z2daGqRh1WHtx?p=preview) ma, la funzione (grid.appScope.letter()) viene chiamato per infinite volte. Ho sollevato il problema ma non ho ricevuto alcuna risposta .. https://github.com/angular-ui/ui-grid/issues/4250, https://github.com/angular-ui/ui-grid/issues/4314. Qualcuno può suggerire il miglior modo possibile per raggiungere il compito di cui sopra.

Answer 1

Per accedere showfile in là, hai provato ...

{{grid.appScope.gridOptions.columnDefs[0].showFile}} 

Answer 2

ho modificato il plnkr: http://plnkr.co/edit/kdU59pZYQT0B76vYBQC8?p=preview.

non sono sicuro se questo è ciò che si vuole fare, ho usato il headerCellTemplate nelle columnDefs oggetto invece del HeaderTemplate, poi si accede con: {{}} col.colDef.showFile

columnDefs: [{ 
    field: 'name', 
    displayName: 'First Name', 
    width: 90 
    }, { 
    field: 'title', 
    displayName: 'Last Name', 
    width: 80 
    }, { 
    field: 'test', 
    displayName: 'test', 
    width: 80, 
    showFile: 'FILE', 
    headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }">' + 
     '<div class="ui-grid-cell-contents" col-index="renderIndex" title="TOOLTIP">' + 
     '<span>{{ col.displayName CUSTOM_FILTERS }}</span><br /><span>{{col.colDef.showFile}}</span>' + 
     '<span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }">' + 
     '&nbsp;' + 
     '</span>' + 
     '</div>' + 
     '<div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" ng-click="toggleMenu($event)" ng-class="{\'ui-grid-column-menu-button-last-col\': isLastCol}">' + 
     '<i class="ui-grid-icon-angle-down">&nbsp;</i>' + 
     '</div>' + 
     '<div ui-grid-filter></div>' + 
     '</div>' 
    } 

Answer 3

Prova a utilizzare renderIndex. Questo ti darà l'indice della colonna.

{{grid.appScope.gridOptions.columnDefs[renderIndex].customField}}