在uigrid中显示断裂线

Question

我正在使用如下的uigrid：

columnDefs: [                            
           { name: 'CA', field: 'CA', displayName: 'CA', enableCellEdit: false }
]

CA列包含如下数据：

<div> name : Jon ><br /> Job : Barber </div>

即使我有<br />我得到了一个结果，没有断线。

任何解决方案？显示结果如：

name : Jon
Job : Barber

Answer 1

我相信这可能接近你想要的，user2848242。

JavaScript / AngularJS控制器：

var app = angular.module('app', ['ui.grid', 'ngSanitize']);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  $scope.gridOptions = {
    rowHeight: 40,
    enableRowHeaderSelection: false,
    columnDefs: [{
      name: 'CA1',
      field: 'CA',
      displayName: 'Original CA',
      enableCellEdit: false,
      cellTemplate: '<span ng-bind-html="row.entity[col.field]"></span>'
    }, {
      name: 'CA2',
      field: 'Name',
      displayName: 'Alternative CA',
      enableCellEdit: false,
      cellTemplate: '<div>Name: {{row.entity[col.field]}}<br />Job: {{row.entity["Job"]}}</div>'
    }]
  }
  $http.get('data.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

基本想法是，为cellTemplate添加columnDefs。棘手的部分是，由于HTML在您的数据中，您需要使用ngSanitize来信任＆＃34; HTML因此它将以HTML格式显示。由于最好将HTML与数据分开，出于多种原因，我提供了另一种选择 - 因此原始CA和备用CA列。

这是一个工作的Plunker，http://plnkr.co/edit/pkoARFr11Q7TmbBIegIT?p=preview。

希望有所帮助，如果您有任何其他问题，请与我联系。