Angular ng-grid editableCellTemplate throwing exception

Question

I am trying to set the editableCellTemplate ColumnDef option in a ng-grid ( documented here ).

When I do set it, even to the default value of <input ng-class="'colt' + col.index" ng-input="COL_FIELD" /> , clicking on a cell immediately gives the error

Error: No controller: ngModel at Error () at getControllers ( http://foo.com:43037/Scripts/angular.js:4232:19 ) at nodeLinkFn ( http://foo.com:43037/Scripts/angular.js:4361:35 ) at compositeLinkFn ( http://foo.com:43037/Scripts/angular.js:3969:15 ) at compositeLinkFn ( http://foo.com:43037/Scripts/angular.js:3972:13 ) at publicLinkFn ( http://foo.com:43037/Scripts/angular.js:3874:30 ) at Object. ( http://foo.com:43037/Scripts/ng-grid-2.0.7.js:2660:13 ) at Object.applyFunction [as fn] (:778:50) at Object.Scope.$digest ( http://foo.com:43037/Scripts/angular.js:7896:27 ) at Object.$delegate. proto .$digest (:844:31) <input ng-class="'colt' + col.index" ng-input="row.entity.Name">

If I do not set editableCellTemplate, editing cells work just fine.

$scope.gridOptions = {
    data: 'people',
    enableCellSelection: true,
    enableRowSelection: false,
    enableCellEdit: true,
    columnDefs:
    [
        { field: 'Id', displayName: 'ID', enableCellEdit: false },
        { field: 'Name', enableCellEdit: true, 
          editableCellTemplate: '<input ng-class="\'colt\' + col.index" ng-input="COL_FIELD" />' }
    ]
};

What is wrong?

(The problem I am actually trying to solve is creating an event when cell edit ends , but that solution assumes that you can set a cell template)

Answer 1

Your template for input needs to have an ng-model attribute defined as well:

<input ng-class="'colt' + col.index" ng-input="COL_FIELD" ng-model="COL_FIELD" />

this is the default editableCellTemplate .