我使用具有以下数据结构的ui-grid:
{
name: String,
tags: [{label: String, image: String}]
}
因此网格将有2列:名称和标签。行条目可以有多个与之关联的标记(因此是数组)。 每个标记都有两个属性:标签和图像,它是图像文件的路径。
我创建了一个显示标签的指令(例如directiveTags):
为简单起见:
<div>{{tag.label}}<img ng-src={{tag.image}}></div>
如何在gridOptions的cellTemplate属性中使用此指令? 我的想法是这样的:
columnDefs: [
{ field: 'name'},
{ field: 'tags',
cellTemplate : "<div ng-repeat="tag in tags"><directive-tags></directive-tags></div>"
},
非常感谢。
答案 0 :(得分:4)
检查custom row templates的文档,我们可以看到可以从行模板访问row
对象,例如:grid.appScope.fnOne(row)
。按照示例并尝试运行此命令,row
对象将记录到控制台。 row
包含entity
密钥,这是存储行数据的位置。
您与示例非常接近,您只需要将tag in tags
替换为tag in row.entity.tags
并将您的指令重命名为不包含破折号(因为我之前没有使用过指令在我的第一杯咖啡上,我也被困在这一段时间,指令名称的破折号不解析。)
这是一个掠夺者:http://plnkr.co/edit/P1o1GolyZ5wrKCoXLLnn?p=preview
var testApp = angular.module('testApp', ['ui.grid']);
testApp.directive('directivetags', function() {
return {
restrict: 'E',
template: '<div>{{tag.label}}<img ng-src={{tag.image}}></div>',
replace: true
}
});
testApp.controller('TestCtrl', function($scope) {
$scope.grid = {
rowHeight: 50,
data: [{
name: 'Test',
tags: [{
label: 'Suwako Moriya',
image: 'http://i.imgur.com/945LPEw.png'
}]
}],
columnDefs: [
{ field: 'name'},
{ field: 'tags',
cellTemplate: '<div style="height: 50px" ng-repeat="tag in row.entity.tags"><directivetags></directivetags></div>'
}
]};
});