有没有办法使用 DTColumnBuilder 在文本框中呈现带有模型绑定的列?
就像是:
DTColumnBuilder.newColumn('ColumnName').withTitle('Column Name').renderWith(function (data) {
return '<input type="text" ng-model="ColumnName" />';
}),
有没有办法使用 DTColumnBuilder 在文本框中呈现带有模型绑定的列?
就像是:
DTColumnBuilder.newColumn('ColumnName').withTitle('Column Name').renderWith(function (data) {
return '<input type="text" ng-model="ColumnName" />';
}),
不,您可以使用 (example) 呈现表格:
DTColumnBuilder.newColumn('firstName', 'First name')
.renderWith(function (data) {
return '<input type="text" ng-model="json.firstName" />'
}),
但是ng-model
永远不会被识别,因为它本身不是有角度的渲染。如果您让 angular 进行渲染,即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>
demo -> http://plnkr.co/edit/f0ycjJvsACaumY13IVUZ?p=preview
请注意,当您在输入框中进行编辑时,JSON 项目会更新。
有同样的问题,这是我的解决方案:
换句话说:
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 中进行了测试,在两者中都可以使用