Angularjs 可扩展 table 行

Question

我正在使用 angular 1.4.3 和 angular 数据表（这里是 link：http://l-lin.github.io/angular-datatables）。

我的需求是基本的。我需要在单击时展开该行，并且所有 ng-click 或其他行都需要工作。但是在图书馆的文档中，他们会像这样触发回调；

https://datatables.net/examples/api/row_details.html

当我尝试将具有 ng-click 的按钮添加到示例中的格式函数时。它不起作用（我的意思是 ng-click 不起作用。）。我认为问题是由于元素在文档加载后附加到 table 引起的。

你知道吗？

Answer 1

你是对的，ng-click 必须 $compile'd 才有用。但是您没有去所有 angular 方式：因为 dataTables 是一个 jQuery 插件，您仍然可以使用委托事件处理程序等等 - 最大的问题就是访问API，幸运的是我们可以用dtInstance代替。这是臭名昭著的子行示例的 angular-datatables 版本：

标记：

<table datatable="" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance"></table>

基本初始化，使用远程JSON源（注意.details-control这里设置）：

$scope.dtColumns = [
  DTColumnBuilder.newColumn('name').withTitle('Name')
                                   .withOption('className', 'details-control'),
  DTColumnBuilder.newColumn('position').withTitle('Position'),
  DTColumnBuilder.newColumn('salary').withTitle('salary')
];  

$scope.dtInstance = {};

$scope.dtOptions = DTOptionsBuilder
  .fromSource('https://api.myjson.com/bins/2v7sr')
  .withPaginationType('full_numbers')
  .withDataProp('data');

"Child rows" 示例移植到 angular :

var format = function ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
           '<td>Full name:</td>'+
           '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
           '<td>Extension number:</td>'+
           '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
           '<td>Extra info:</td>'+
           '<td>And any further details here (images etc)...</td>'+
         '</tr>'+
        '</table>';
}

$('body').on('click', '.details-control', function() {
   var tr = $(this).closest('tr');
   var row = $scope.dtInstance.DataTable.row( tr );
   if ( row.child.isShown() ) {
      // This row is already open - close it
      row.child.hide();
      tr.removeClass('shown');
   } else {
      // Open this row
      row.child( format(row.data()) ).show();
      tr.addClass('shown');
   }
})

基本上是一样的，只是监听 body 作为委托的父元素，使用 dtInstance 而不是 dataTable API 实例。

演示 -> http://plnkr.co/edit/0CA9jMIg4gXqj9fnY38p?p=preview

Angularjs 可扩展 table 行

Angularjs expandable table row

jquery

datatables

angularjs

angularjs-ng-click

angular-datatables