Angular ng-grid editableCellTemplate throwing exception
angularjs, javascript, ng-grid
Solution
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`.
Problem
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)