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>

演示 - ＆gt;的 http://plnkr.co/edit/f0ycjJvsACaumY13IVUZ?p=preview
请注意，在输入框中进行编辑时，JSON项目会更新。

Answer 2

有同样的问题，这是我的解决方案：

注册dtInstance的回调
来自DataTable $ compile的“draw.dt”与angular

换句话说：

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＆amp; amp;和Safari，两者都工作

如何使用angular-datatables渲染具有模型绑定的列？

2 个答案: