如何在有角度的 ui-grid 单元格中添加图像 [英] How do I add image in a angular ui-grid cell
本文介绍了如何在有角度的 ui-grid 单元格中添加图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何在 angular
ui-grid
单元格中添加图像.
How do I add image in a angular
ui-grid
cell.
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: 'image'}
],
data:[
{name:"Name1",company:"Company1",image:"http://cdn.flaticon.com/png/256/70689.png"},
{name:"Name2",company:"Company2",image:"http://cdn.flaticon.com/png/256/70689.png"},]
};
}]);
推荐答案
您可以使用自定义单元格模板来渲染单元格中的图像.
You can use a custom cell template to render the image in the cell.
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
enableSorting: true,
rowHeight:100,
columnDefs: [
{ field: 'name' },
{ field: 'company' },
{ field: 'image', cellTemplate:"<img width=\"50px\" ng-src=\"{{grid.getCellValue(row, col)}}\" lazy-src>"}
],
data:[
{name:"Name1",company:"Company1",image:"http://cdn.flaticon.com/png/256/70689.png"},
{name:"Name2",company:"Company2",image:"http://cdn.flaticon.com/png/256/70689.png"},
{name:"Name3",company:"Company3",image:"http://cdn.flaticon.com/png/256/70689.png"}
]
};
}]);
这是一个有效的 plnkr.
Here is a working plnkr.
http://plnkr.co/edit/awQ7B0WmmZhythlCZmgt?p=preview
这篇关于如何在有角度的 ui-grid 单元格中添加图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文