在UI网格使用NG选项下拉editableCellTemplate [NG网3.X]
我使用的是NG-网格的新3.0版本的 UI电网 以让我的应用程序的网格。我想要做的是使可编辑单元格中的一个在我的表中的 NG选项的下拉填充有带角工厂检索到的数据。
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-options dropdown that is filled with data retrieved with an angular factory.
我尝试使用 editableCellTemplate 的功能来做到这一点UI的网格。
I'm trying to do this by using the editableCellTemplate feature of the ui-grid.
下面是一些例子code:
Here is some example code:
HTML
<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
控制器:
$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:
temp.html:
<div>
<select ng-model="row.entity.gender" data-ng-options="d as d.type for d in genderType">
<option value="" selected disabled>Choose Gender</option>
</select>
</div>
下面是一个 plunker 与code。 [注意:这仅仅是例子code。阵NG选项被从工厂的角度实际code拉,范围不声明。 editDropdownOptionsArray可能无法工作,因为数据是动态的。]
Here is a plunker with the code. [Note: this is just example code. Array for ng-options is being pulled in from angular factory in actual code and not declared in scope. editDropdownOptionsArray will probably not work because data is dynamic.]
是否有可能与UI的网格来做到这一点?我想也许这是一个规模问题,因为如果我会把code NG选项在我的HTML页面,它的工作如预期,但我可以从UI网文档收集的是,temp.html文件应在范围。我知道这东西仍然是不稳定的释放,但对此事的任何帮助,将AP preciated!
Is it possible to do this with ui-grid? I thought maybe it was an issue of scope because if I would put the ng-option code in my HTML page it worked as expected, but what I can gather from ui-grid documentation is that the temp.html file should be in the scope. I know this stuff is still in unstable release, but any help on the matter would be appreciated!
更新2015年3月31日:
大家好,只是注意如果您尝试这种解决方案,这是行不通的。今年一月,code外部范围从 getExternalScopes()
重构为 grid.addScope.source
。 https://github.com/angular-ui/ng-grid/issues/1379
Hi guys, just a note if your trying out this solution and it doesn't work. In January the code for external scopes was refactored from getExternalScopes()
to grid.addScope.source
. https://github.com/angular-ui/ng-grid/issues/1379
下面是更新plunkr用新的code:点击我一>
Here's the updated plunkr with the new code: Click Me!
您需要使用的UI电网3.x版中的外部范围的功能。你为什么没能获得在下拉列表中选择任何选项的原因是因为UI的网格现在使用隔离范围,这会不会让你直接访问一个单元格时应用程序范围内的变量。
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.
我能得到你的plunkr通过下面的步骤工作 - 看更新plunkr
I was able to get your plunkr working with steps below - see updated plunkr
步骤:
1)在index.html的,指定的外部范围在网格格即修改属性
1) Within index.html, specify the external-scopes attribute in the grid div i.e. modify
<div ui-grid="gridOptions" ui-grid-edit class="grid"></div>
到
<div ui-grid="gridOptions" ui-grid-edit class="grid" external-scopes="myExternalScope"></div>
2)在app.js,分配范围,我们的外部范围的属性即添加这一行:
2) Within app.js, assign the scope to our external-scope property i.e add this line:
$scope.myExternalScope = $scope;
3)在temp.html,使用访问genderTypes阵列的 getExternalScopes()即修改 editableCellTemplate 从
3) Within temp.html, access the genderTypes array using getExternalScopes() i.e. modify editableCellTemplate value from
<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in genderType">
到
<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in getExternalScopes().genderTypes">
额外的思考:
1)我没有找到在 UI网/ dropdownEditor 适合我的需求 - 因此,还没有尝试了这一点。
1) I did not find the ui-grid/dropdownEditor suitable for my needs - hence, did not try this out yet.
2)您可以添加的 cellTemplate 也随之 editableCellTemplate 。可以分配两个相同的值。
2) You can add cellTemplate also along with editableCellTemplate. You can assign both the same value.
参考文献: