Как отобразить столбец с привязкой модели, используя angular-datatables?

Есть ли способ отобразить столбец с привязкой модели в текстовом поле с помощью DTColumnBuilder?

Что-то типа:

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

person Nikko Reyes    schedule 03.11.2015    source источник


Ответы (2)


Нет. Вы можете отобразить таблицу с помощью (пример):

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

но ng-model никогда не распознается, потому что рендеринг выполняется не самим angular. Если вы позволите 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> 

демо -> http://plnkr.co/edit/f0ycjJvsACaumY13IVUZ?p=preview
обратите внимание, что элементы JSON обновляются, когда вы редактируете поля ввода.

person davidkonrad    schedule 07.11.2015

Была такая же проблема, вот мое решение:

  1. Зарегистрировать обратный вызов для dtInstance
  2. В «draw.dt» из DataTable $ скомпилируйте связанный html с угловым

Другими словами:

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, работал в обоих

person mavarazy    schedule 03.12.2015
comment
что с ${data}? это то, что понимает DataTable? - person JobaDiniz; 04.06.2019