javascript - 在 Angular Js 的数据表中设置 fontawesome 图标 DTColumnBuilder

Question

我正在使用 DTColumnBuilder 将 Json 数据显示到数据表中。所以现在我能够将数据显示到列的每一行中。但我想在列中的每一行中设置一个超棒的字体图标。

Controller :

angular.module('app.example').controller('xyz', function ($scope,$http,$state, $stateParams,Rh,DTOptionsBuilder,DTColumnBuilder,DTColumnDefBuilder) {

  this.standardOptions = DTOptionsBuilder

  .fromFnPromise(Rl.all('abc/main/logic').getList())
  //Add Bootstrap compatibility
  .withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
  "t" +
  "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
  .withBootstrap();
  this.standardColumns = [
    DTColumnBuilder.newColumn('msg.firstName'),
    DTColumnBuilder.newColumn('msg.lastName'),   

  ];

});

HTML

<table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>                    
        </tr>
    </thead>
</table>

我想在列中添加超棒的字体图标。

DTColumnBuilder.newColumn('fontawesome-icon'),
<th>Action</th>    

我看到了一个链接，但我没有得到正确的链接。 How to combine data and show image in angular datatable .因为我只想使用 font-awesome。

<i class="fa fa-refresh" aria-hidden="true"></i>

我有一个函数但是我不能调用这个函数

function action(data) {  
  return $sce.trustAsHtml('<i class="fa fa-fw fa-folder-open-o"> </i>');
}

谢谢。

Answer 1

您可以使用 renderWith :

DTColumnBuilder.newColumn('msg.lastName')
  .renderWith(function(data, type, full, meta) {
     return '<i class="fa fa-refresh" aria-hidden="true"></i>'
   }) 

将呈现 HTML。参见 https://datatables.net/reference/option/columns.render了解详情。

例子-> http://plnkr.co/edit/NZSFrdeCAObbRjCAa7Vi?p=preview

---

如果需要将指令附加到返回的 HTML，请使用 createdCell 和 $compile:

.withOption('createdCell', function(cell, cellData, rowData, rowIndex, colIndex) {
   $compile(cell)($scope)
})