您可以向使用 angular ui-网格创建的 table 单元格添加标记吗？

Question

我正在考虑将 ng-grid 用于新的 angular 应用程序。我们在每个单独的单元格中创建 requires 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'
}];

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

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

有关 ng-grid 示例，请参阅 here for an example when using ui-grid. If you happen to be using an ng-grid you can do something similar, but instead of COL_FIELD use row.getProperty(col.field). See 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。

您可以向使用 angular ui-网格创建的 table 单元格添加标记吗？

Can you add markup to table cells created using angular ui-grid?

angularjs

angular-ui-grid