Javascript 在uigrid中显示特征线

我使用的uigrid如下所示：

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

CA列包含如下数据：

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

---

我相信这可能接近你想要的，用户2848242

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;
    });
}]);

var-app=angular.module（'app'，['ui.grid'，'ngSanitize']）；
app.controller（'MainCtrl'，['$scope'，'$http'，函数（$scope，$http）{
$scope.gridOptions={
行高：40，
enableRowHeaderSelection:false，
columnDefs：[{
名称：“CA1”，
字段：“CA”，
displayName:“原始CA”，
enableCellEdit:false，
单元格模板：“”
}, {
名称：“CA2”，
字段：“名称”，
displayName:“备用CA”，
enableCellEdit:false，
cellTemplate:'名称：{{row.entity[col.field]}}
作业：{{row.entity[“作业”]}'
}]
}
$http.get（'data.json'）
.然后（功能（响应）{
$scope.gridOptions.data=response.data；
});
}]);

基本思想是，在

列defs

中添加一个

单元格模板。棘手的部分是，由于HTML存在于数据中，您需要使用
ngSanitize
来“信任”HTML，使其显示为HTML。由于许多原因，最好将HTML与数据分开，因此我提供了一种替代方法——即原始CA和替代CA列

这是一个正在工作的Plunker

希望这能有所帮助，如果你还有其他问题，请告诉我

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;
    });
}]);