[英]Angular-UI grid : adding custom field in columnDefs and access it from header template
I want to add some custom field in columnDefs and want to access it from header template. 我想在columnDefs中添加一些自定义字段,并希望从标题模板中访问它。 As an example , i want a field let say showFile
举个例子,我想要一个字段,比如showFile
$scope.gridOptions.columnDefs = [
{
name: 'ServiceID',
displayName: 'Service',
showFile: some data
}]
and want to access showFile inside header template ... 并希望在标题模板中访问showFile ...
<div class="ui-grid-top-panel" style="text-align: center">
{{ want to access 'showFile' }}
</div>
What's the best possible way to do this. 什么是最好的方法来做到这一点。 As i have tried it using custom method as
正如我尝试使用自定义方法一样
<div class="ui-grid-top-panel" style="text-align: center">
{{grid.appScope.letter()}}
</div>
(plnkr link http://plnkr.co/edit/ZW43LsiLY7GdnX6XEOgG?p=preview , http://plnkr.co/edit/3E8HTz4Z2daGqRh1WHtx?p=preview ) but , the function (grid.appScope.letter()) is being called for infinite number of times . (plnkr链路http://plnkr.co/edit/ZW43LsiLY7GdnX6XEOgG?p=preview , http://plnkr.co/edit/3E8HTz4Z2daGqRh1WHtx?p=preview )但是,该函数(grid.appScope.letter())正在被无数次呼唤。 I have raised the issue but didn't got any reply .. https://github.com/angular-ui/ui-grid/issues/4250 , https://github.com/angular-ui/ui-grid/issues/4314 .
我提出这个问题,但没有得到任何答复.. https://github.com/angular-ui/ui-grid/issues/4250 , https://github.com/angular-ui/ui-grid/问题/ 4314 。 Can anyone please suggest the best possible way to achieve the above mentioned task.
任何人都可以建议最好的方法来实现上述任务。
Try using renderIndex . 尝试使用renderIndex 。 This will give you the column's index.
这将为您提供列的索引。
{{grid.appScope.gridOptions.columnDefs[renderIndex].customField}}
要在那里访问showFile,你试过......
{{grid.appScope.gridOptions.columnDefs[0].showFile}}
I edited the plnkr: http://plnkr.co/edit/kdU59pZYQT0B76vYBQC8?p=preview . 我编辑了plnkr: http ://plnkr.co/edit/kdU59pZYQT0B76vYBQC8?p = preview。
I'm not sure if that's what you want to do, i used the headerCellTemplate in the columnDefs object instead of the headerTemplate, then you access with: {{col.colDef.showFile}} 我不确定你是不是想做什么,我在columnDefs对象中使用了headerCellTemplate而不是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 }">' +
' ' +
'</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"> </i>' +
'</div>' +
'<div ui-grid-filter></div>' +
'</div>'
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.