Siatka Angular-UI: dodawanie pola niestandardowego w kolumnie Widoki i uzyskiwanie dostępu do niego z szablonu nagłówka

Question

Chcę dodać niestandardowe pole w elemencie columnDefs i chcę uzyskać do niego dostęp z szablonu nagłówka. Jako przykład, chcę let pole powiedzieć showFile

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

i chcesz uzyskać dostęp do showFile wewnątrz szablonu nagłówka ...

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

Co znajduje się w najlepszy możliwy sposób, aby to zrobić. Jak próbowałem go za pomocą metody niestandardowej jako

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

(link plnkr http://plnkr.co/edit/ZW43LsiLY7GdnX6XEOgG?p=preview, http://plnkr.co/edit/3E8HTz4Z2daGqRh1WHtx?p=preview), ale funkcji (grid.appScope.letter()) jest wywoływana przez nieskończoną liczbę razy. Podniosłem problem, ale nie otrzymałem żadnej odpowiedzi. https://github.com/angular-ui/ui-grid/issues/4250, https://github.com/angular-ui/ui-grid/issues/4314. Czy każdy może zaproponować najlepszy możliwy sposób osiągnięcia wyżej wymienionego zadania.

Answer 1

Aby uzyskać dostęp showFile tam, próbowałeś ...

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

Answer 2

I edycji plnkr: http://plnkr.co/edit/kdU59pZYQT0B76vYBQC8?p=preview.

Nie jestem pewien, czy to, co chcesz zrobić, użyłem headerCellTemplate w columnDefs obiekt zamiast headerTemplate, a następnie uzyskać dostęp z: {{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

Spróbuj użyć renderIndex. To da ci indeks kolumny.

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