Using an ng-option dropdown in a ui-grid editableCellTemplate [ng-grid 3.x]

Question

I\'m using ng-grid\'s new 3.0 release ui-grid to make a grid in my application. What i\'m trying to do is make one of the editable cells in my table an ng-o

Answer 1

You would need to use the external-scopes feature within 3.x version of ui-grid. The reason why you are not able to get any options in the select dropdown is because ui-grid now uses an isolated scope and this will not allow you to directly access app scope variables when in a cell.

I was able to get your plunkr working with steps below - see updated plunkr

Steps:

1) Within index.html, specify the external-scopes attribute in the grid div i.e. modify

to

2) Within app.js, assign the scope to our external-scope property i.e add this line:

$scope.myExternalScope = $scope;

3) Within temp.html, access the genderTypes array using getExternalScopes() i.e. modify editableCellTemplate value from

to

Extra Thoughts:

1) I did not find the ui-grid/dropdownEditor suitable for my needs - hence, did not try this out yet.

2) You can add cellTemplate also along with editableCellTemplate. You can assign both the same value.

References:

1. http://ui-grid.info/docs/#/tutorial/305_externalScopes