UI-Bootstrap ng-grid 中的日期选择器无法使用 enableCellEditOnFocus=true

Question

我知道如何在 ng-grid 单元格的 editableCellTemplate 中使用 UI-Bootstrap-Datepicker。

我的问题：当我将 enableCellEdit=true 选项替换为 enableCellEditOnFocus=true（单击要编辑的单元格）时，它不再起作用。有谁知道为什么它坏了以及如何解决它？

var editableCellTemplateUsingDatePicker = '<input ng-class="\'colt\' col.index" datepicker-popup="dd.MM.yyyy" datepicker-append-to-body=true is-open="isOpen" ng-model="COL_FIELD" my-input="COL_FIELD"/>';

$scope.gridOptions = { 
    data: 'myData',
    //enableCellEdit: true,
    enableCellEditOnFocus: true,
    enableCellSelection: true,
    enableRowSelection: false,
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      field:'dateOfBirth', 
      displayName:'Date of Birth', 
      editableCellTemplate: editableCellTemplateUsingDatePicker,
      cellFilter: 'date:"dd.MM.yyyy"',
    }]
    };

Plunker

Answer 1

现在，我找到了另一种方法来使用 ui-bootstrap 日期选择器实现单击编辑所需的行为。

您可以将 ng-click="editCell()" 添加到您的自定义 cellTemplate 以通过单击单元格进入编辑模式。这里的工作设置：

var cellTemplateEditOnClick = '<div class="ngCellText" ng-click="editCell()" ng-class="col.colIndex()"><span ng-cell-text>{{row.getProperty(col.field) CUSTOM_FILTER}}</span></div>';

$scope.gridOptions = { 
    data: 'myData',
    enableCellEdit: true,
    enableCellSelection: true,
    enableRowSelection: false,
    columnDefs: [{
      field: 'name',
      displayName: 'Name',
      cellTemplate: cellTemplateEditOnClick.replace('CUSTOM_FILTER', '')
    }, {
      field:'dateOfBirth', 
      displayName:'Date of Birth', 
      editableCellTemplate: editableCellTemplateUsingDatePicker,
      cellTemplate: cellTemplateEditOnClick.replace('CUSTOM_FILTER', '| date:"dd.MM.yyyy"')
    }]
    };

Plunker

UI-Bootstrap ng-grid 中的日期选择器无法使用 enableCellEditOnFocus=true

UI-Bootstrap Datepicker in ng-grid not working with enableCellEditOnFocus=true

datepicker

angularjs

angular-ui-bootstrap

ng-grid