как добавить изображение в качестве заголовка в угловую сетку пользовательского интерфейса?

Я хотел бы добавить изображение в заголовок, а не в строки.

var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
 $scope.gridOptions = {
   enableSorting: true,
   columnDefs: [
     { field: 'name' },
     { field: 'company'  },
     { field: '<THIS NEEDS TO BE IMAGE>' displayName: 'Timer'}
   ],
   data:[
     {name:"Name1",company:"Company1",Timer:"10"},
     {name:"Name2",company:"Company2",Timer:"11"},]
};  
}]);

angularjs angular-ui-grid
person SamDevx    schedule 12.11.2015    source источник
comment
Можете ли вы включить свой шаблон, чтобы показать, что вы пробовали?   -  person Tristan    schedule 13.11.2015

Ответы (2)


arrow_upward
0
arrow_downward

У меня нет конкретного примера для вставки, но я предполагаю, что вы можете переопределить headerCellTemplate по умолчанию. Я использовал cellTemplate с изображением, но не headerCellTemplate. Учитывая все другие функции, которые могут отображаться в заголовке, вам, возможно, придется найти headerCellTemplate по умолчанию, а затем добавить свое изображение.

person WadeB    schedule 12.11.2015

arrow_upward
0
arrow_downward

Как упоминалось в @WadeB, вы должны использовать headerCellTemplate для этого конкретного столбца.

Я создал Plunkr, демонстрирующий возможную настройку.

Вам нужно добавить headerCellTemplate в свой columnDef:

{ field: 'company', headerCellTemplate: myHeader}

и создайте свой собственный шаблон, создав локальную переменную:

var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span>{{ col.displayName CUSTOM_FILTERS }}</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>"

Это немного сложно понять, важная часть:

{{ col.displayName CUSTOM_FILTERS }}

Замените эту часть на что угодно, например картинку, как показано в Plunkr.

var myHeader = "<div ng-class=\"{ 'sortable': sortable }\"><!-- <div class=\"ui-grid-vertical-bar\">&nbsp;</div> --><div class=\"ui-grid-cell-contents\" col-index=\"renderIndex\" title=\"TOOLTIP\"><span><img src=\"https://angularjs.org/img/AngularJS-large.png\" alt=\"Mountain View\" style=\"width:100px;height:30px;\"></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>";

Вы также можете переопределить шаблон глобально:

$templateCache.put('ui-grid/uiGridHeaderCell',
    '<div>my-own-html</div>'
);
person CMR    schedule 13.11.2015