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

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

i'm using ng-grid's new 3.0 release ui-grid create grid in application. i'm trying create 1 of editable cells in table ng-options dropdown filled info retrieved angular factory.

i'm trying using editablecelltemplate feature of ui-grid.

here illustration code:

html:

<div ui-grid="gridoptions" ui-grid-edit class="grid"></div>

controller:

$scope.gridoptions = { enablesorting: true, enablefiltering: true, enablecelleditonfocus: true, columndefs: [ { field: 'name', sort: { direction: 'desc', priority: 1 } }, { field: 'gender', edittype: 'dropdown', enablecelledit: true, editablecelltemplate: 'temp.html' }, { field: 'company', enablesorting: false } ]};

temp.html:

<div> <select ng-model="row.entity.gender" data-ng-options="d d.type d in gendertype"> <option value="" selected disabled>choose gender</option> </select> </div>

here plunker code. [note: illustration code. array ng-options beingness pulled in angular mill in actual code , not declared in scope. editdropdownoptionsarray not work because info dynamic.]

is possible ui-grid? thought maybe issue of scope because if set ng-option code in html page worked expected, can gather ui-grid documentation temp.html file should in scope. know stuff still in unstable release, help on matter appreciated!

update 3/31/2015:

hi guys, note if trying out solution , doesn't work. in jan code external scopes refactored getexternalscopes() grid.addscope.source. https://github.com/angular-ui/ng-grid/issues/1379

here's updated plunkr new code: click me!

you need utilize external-scopes feature within 3.x version of ui-grid. reason why not able options in select dropdown because ui-grid uses isolated scope , not allow straight access app scope variables when in cell.

i able plunkr working steps below - see updated plunkr

steps:

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

<div ui-grid="gridoptions" ui-grid-edit class="grid"></div>

to

<div ui-grid="gridoptions" ui-grid-edit class="grid" external-scopes="myexternalscope"></div>

2) within app.js, assign scope our external-scope property i.e add together line:

$scope.myexternalscope = $scope;

3) within temp.html, access gendertypes array using getexternalscopes() i.e. modify editablecelltemplate value from

<select ng-model="row.entity.gender" data-ng-options="d d.type d in gendertype">

to

<select ng-model="row.entity.gender" data-ng-options="d d.type d in getexternalscopes().gendertypes">

extra thoughts:

1) did not find ui-grid/dropdowneditor suitable needs - hence, did not seek out yet.

2) can add together celltemplate along editablecelltemplate. can assign both same value.

references:

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

javascript angularjs grid ng-grid angular-ui-grid