Définir l'icône fontawesome DTColumnBuilder dans Datatable dans Angular Js

Question

J'affiche des données Json dans datatable en utilisant DTColumnBuilder. Donc maintenant je suis capable d'afficher des données dans chaque ligne de la colonne. Mais je veux placer une icône de font-awesome dans chaque rangée dans la colonne.

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> 

Je veux ajouter l'icône de police-awesome dans la colonne.

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

J'ai vu un lien mais je ne comprends pas correctement. How to combine data and show image in angular datatable. Parce que je veux utiliser seulement font-awesome.

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

J'ai une fonction pour cela, mais je ne suis pas en mesure appel cette fonction

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

Merci à.

Answer 1

Vous pouvez utiliser renderWith:

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

HTML sera rendu. Voir https://datatables.net/reference/option/columns.render pour plus de détails.

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

---

Utilisez createdCell et $compile si vous devez joindre des directives au code HTML retourné:

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