如何在角度ui網格中添加圖像作爲標題？

我想在標題中添加圖像，而不是在行中添加圖像。如何在角度ui網格中添加圖像作爲標題？

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"},] 
}; 
}]);

來源

2015-11-12 SamDevx

你可以包括你的模板，以顯示你已經嘗試了什麼？ – Tristan

我沒有一個具體的例子來粘貼，但我會假設你可以覆蓋默認headerCellTemplate。我用一個圖像但不是headerCellTemplate的cellTemplate。考慮到標題中可能出現的所有其他功能，您可能需要找到默認的headerCellTemplate，然後添加圖像。

來源

2015-11-12 22:44:41 WadeB

像@WadeB提到的那樣，您必須爲該特定列使用headerCellTemplate。

我創建了a 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 }}

用你喜歡的任何東西替換那部分，例如E中的畫面一樣顯示在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>' 
);

來源

2015-11-13 12:09:36 CMR

如何在角度ui網格中添加圖像作爲標題？

回答

相關問題