Сетка Angular-UI: добавление настраиваемого поля в columnDefs и доступ к нему из шаблона заголовка

Question

Я хочу добавить некоторое настраиваемое поле в columnDefs и хочу получить к нему доступ из шаблона заголовка. В качестве примера я хочу, чтобы поле, скажем, showFile

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

и хотите получить доступ к showFile внутри шаблона заголовка...

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

Какой самый лучший способ сделать это. Как я попробовал, используя пользовательский метод как

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

(ссылка plnkr http://plnkr.co/edit/ZW43LsiLY7GdnX6XEOgG?p=preview, http://plnkr.co/edit/3E8HTz4Z2daGqRh1WHtx?p=preview), но функция (grid.appScope.letter()) является называется бесконечное количество раз. Я поднял вопрос, но не получил никакого ответа.. https://github.com/angular-ui/ui-grid/issues/4250, https://github.com/angular-ui/ui-grid/issues/4314. Может кто-нибудь, пожалуйста, предложите наилучший способ достижения вышеупомянутой задачи.

Answer 1

Попробуйте использовать renderIndex. Это даст вам индекс столбца.

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

Answer 2

Чтобы получить доступ к showFile там, вы пытались...

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

Answer 3

Я отредактировал plnkr: http://plnkr.co/edit/kdU59pZYQT0B76vYBQC8?p=preview.

Я не уверен, что это то, что вы хотите сделать, я использовал headerCellTemplate в объекте columnDefs вместо headerTemplate, тогда вы получаете доступ с помощью: {{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>'
  }