如何使用 angular js ng-grid 在网格的一列中显示图像?
How can i display image in one of the column of grid using angular js ng-grid?
我是 angular JS 的新手,请告诉我如何使用 angular JS 将图像显示为网格中某些列的值。
如果我答对了你的问题,你可以将 img 标签作为单元格模板绑定到 angular 网格。我为您创建了一个 Plunker。检查一下 http://plnkr.co/edit/YIBa7np3kjip2Zzx7nBB?p=preview
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope','$sce', function ($scope,$sce) {
$scope.img="<img ng-src={{url}} />";
$scope.img="<img src='https://angularjs.org/img/AngularJS-large.png' />";
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name:'firstName', field: 'first-name' },
{ name:'1stFriend', field: 'lastName' },
{ name:'city', field: 'company'},
{ name:'getZip', field: 'employed', enableCellEdit:true},
{ name:'Photo', field:'photoP' ,cellTemplate:"<img src='https://angularjs.org/img/AngularJS-large.png' />"}
],
data : [
{
"first-name": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true,
"photoP":""
},
{
"first-name": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false,
"photoP":""
},
{
"first-name": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false,
"photoP":""
}
]
};
}]);
我是 angular JS 的新手,请告诉我如何使用 angular JS 将图像显示为网格中某些列的值。
如果我答对了你的问题,你可以将 img 标签作为单元格模板绑定到 angular 网格。我为您创建了一个 Plunker。检查一下 http://plnkr.co/edit/YIBa7np3kjip2Zzx7nBB?p=preview
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope','$sce', function ($scope,$sce) {
$scope.img="<img ng-src={{url}} />";
$scope.img="<img src='https://angularjs.org/img/AngularJS-large.png' />";
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ name:'firstName', field: 'first-name' },
{ name:'1stFriend', field: 'lastName' },
{ name:'city', field: 'company'},
{ name:'getZip', field: 'employed', enableCellEdit:true},
{ name:'Photo', field:'photoP' ,cellTemplate:"<img src='https://angularjs.org/img/AngularJS-large.png' />"}
],
data : [
{
"first-name": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true,
"photoP":""
},
{
"first-name": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false,
"photoP":""
},
{
"first-name": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false,
"photoP":""
}
]
};
}]);