Question

我正在考虑将ng-grid用于新的角度应用程序。我们创建的网格需要在每个单独的单元格中使用html标记。

一个非常简单的例子是this 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，而不是文本。我怎么能这样做？

Answer 1

假设您可以控制您的数据（即您可以更改数据：

$scope.data = [{
  first: '<em>Andrew</em>',
  last: '<strong>Eisenberg</strong>'
}];

为：

$scope.data = [{
  first: 'Andrew',
  last: 'Eisenberg'
}];

您可以使用columnDefs（包含HTML模板）定义cellTemplates，如下所示：

$scope.gridOptions = {
   columnDefs: [
     { 
       field: 'first',
       cellTemplate: '<em>{{COL_FIELD}}</em>'
     },
     { 
       field: 'last',
       cellTemplate: '<strong>{{COL_FIELD}}</strong>'
     },
   ],

有关使用ui-grid的示例，请参阅here。如果你碰巧使用ng-grid，你可以做类似的事情，而不是COL_FIELD使用row.getProperty(col.field)。有关ng-grid示例，请参阅here。

编辑：如果您无法控制数据且必须包含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']);

请参阅here了解演示。

你能为使用角度ui网格创建的表格单元格添加标记吗？

1 个答案: