我正在考虑将ng-grid用于新的角度应用程序。我们正在创建的网格在每个单元格中都需要html标记。
这个plunkr中有一个非常简化的示例。ui-grid小部件具有一些要使用<strong>和<em>标签的单元格。但是，标记显示为字符串，而不是DOM。
所以，这就是我所拥有的：
HTML：
<body ng-app="mygrid">
<div ng-controller="GridCtrl">
<div ui-grid="{ data: myData }"></div>
</div>
</body>
JS：
angular.module('mygrid', ['ui.grid'])
.controller('GridCtrl', function($scope) {
$scope.name = 'Andrew';
$scope.data = [{
first: '<em>Andrew</em>',
last: '<strong>Eisenberg</strong>'
}];
});
我希望将其显示为DOM，而不是文本。我怎样才能做到这一点？
假设您对数据有控制权（即可以从以下位置更改数据）：
$scope.data = [{
first: '<em>Andrew</em>',
last: '<strong>Eisenberg</strong>'
}];
到：
$scope.data = [{
first: 'Andrew',
last: 'Eisenberg'
}];
您可以定义columnDefs与cellTemplates（包含HTML模板）如下：
$scope.gridOptions = {
columnDefs: [
{
field: 'first',
cellTemplate: '<em>{{COL_FIELD}}</em>'
},
{
field: 'last',
cellTemplate: '<strong>{{COL_FIELD}}</strong>'
},
],
有关使用ui-grid的示例，请参见此处。如果您碰巧正在使用ng-grid，则可以执行类似的操作，但不能COL_FIELD使用row.getProperty(col.field)。请参阅此处的ng-grid示例。
编辑：如果您无法控制数据，并且它必须包含HTML
如果您无法控制自己的数据（即您的数据必须包含标记），例如：
$scope.data = [{
first: '<em>Andrew</em>',
last: '<strong>Eisenberg</strong>'
}];
那么您可以执行以下操作。创建一个可以呈现HTML的单元格模板：
<script type="text/ng-template" id="emailTemplate">
<div class="ngCellText" ng-class="col.colIndex()"><span ng-bind-html="COL_FIELD"></span></div>
</script>
columnDefs如下定义该引用模板：
$scope.gridOptions = {
columnDefs: [
{
field: 'first',
cellTemplate: 'htmlTemplate'
},
{
field: 'last',
cellTemplate: 'htmlTemplate'
},
],
注意：您需要包括ngSanitize库以呈现和清理HTML：
var app = angular.module('app', ['ngSanitize', 'ui.grid']);
看到这里的演示。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句