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 (:43037/Scripts/angular.js:4232:19) at nodeLinkFn (:43037/Scripts/angular.js:4361:35) at positeLinkFn (:43037/Scripts/angular.js:3969:15) at positeLinkFn (:43037/Scripts/angular.js:3972:13) at publicLinkFn (:43037/Scripts/angular.js:3874:30) at Object. (:43037/Scripts/ng-grid-2.0.7.js:2660:13) at Object.applyFunction [as fn] (:778:50) at Object.Scope.$digest (: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)

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.:43037/Scripts/angular.js:4232:19) at nodeLinkFn (http://foo.:43037/Scripts/angular.js:4361:35) at positeLinkFn (http://foo.:43037/Scripts/angular.js:3969:15) at positeLinkFn (http://foo.:43037/Scripts/angular.js:3972:13) at publicLinkFn (http://foo.:43037/Scripts/angular.js:3874:30) at Object. (http://foo.:43037/Scripts/ng-grid-2.0.7.js:2660:13) at Object.applyFunction [as fn] (:778:50) at Object.Scope.$digest (http://foo.: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)

• javascript
• angularjs
• ng-grid

1 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.