如何使用angular-datatables呈現使用模型綁定的列？

Question

有沒有辦法使用DTColumnBuilder呈現在文本框中使用模型綁定的列？

喜歡的東西：

DTColumnBuilder.newColumn('ColumnName').withTitle('Column Name').renderWith(function (data) { 
    return '<input type="text" ng-model="ColumnName" />'; 
}), 

Answer 1

號您可以渲染用（例如）表：

DTColumnBuilder.newColumn('firstName', 'First name') 
    .renderWith(function (data) { 
     return '<input type="text" ng-model="json.firstName" />' 
}), 

但ng-model決不會被識別，因爲它沒有棱角本身做渲染。如果讓角做渲染，即datatable="ng"和ng-repeat它的工作原理：

<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns"> 
    <tr ng-repeat="item in json"> 
     <td>{{ item.id }} </td> 
     <td><input ng-model="item.firstName"/></td> 
     <td>{{ item.lastName }} </td> 
    </tr> 
</table> 

演示 - >http://plnkr.co/edit/f0ycjJvsACaumY13IVUZ?p=preview
通知，當你在輸入框中編輯JSON項目被更新。

Answer 2

有同樣的問題，這裏是我的解決方案：

1. 註冊回調dtInstance
2. 在從數據表$編譯相關的HTML 「draw.dt」 與角

換句話說：

HTML：

<table datatable="" 
     dt-options="vm.dtOptions" 
     dt-columns="vm.dtColumns" 
     dt-instance="vm.dtInstanceCallback" 
     class="table table-bordered table-condensed"> 
</table> 

個

JS：

renderWith(function(data, type, full) { 
    return `<a class="ng-scope"><span ng-click='vm.remove("${data}")' class='fa fa-times-circle'></span></a>` 
}); 
... 
vm.dtInstanceCallback = (dtInstance) => { 
    vm.dtInstance = dtInstance; 
    dtInstance.DataTable.on('draw.dt',() => { 
     let elements = angular.element("#" + dtInstance.id + " .ng-scope"); 
     angular.forEach(elements, (element) => { 
      $compile(element)($scope) 
     }) 
    }); 
} 

我最小化元素的選擇，以優化性能，也許這是沒有必要的。迄今已在Chrome & Safari中進行測試，曾在