Javascript 在 ui-grid editableCellTemplate [ng-grid 3.x] 中使用 ng-option 下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26245495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using an ng-option dropdown in a ui-grid editableCellTemplate [ng-grid 3.x]
提问by juleekwin
I'm using ng-grid's new 3.0 release ui-gridto make a grid in my application. What i'm trying to do is make one of the editable cells in my table an ng-optionsdropdown that is filled with data retrieved with an angular factory.
我正在使用 ng-grid 的新 3.0 版本ui-grid 在我的应用程序中制作网格。我想要做的是将表格中的一个可编辑单元格设为ng-options下拉列表，其中填充了使用 angular factory 检索到的数据。
I'm trying to do this by using the editableCellTemplatefeature of the ui-grid.
我试图通过使用ui-grid的editableCellTemplate功能来做到这一点。
Here is some example code:
下面是一些示例代码：
HTML:
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 as d.type for d in genderType">
<option value="" selected disabled>Choose Gender</option>
</select>
</div>
Here is a plunkerwith 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.]
这是一个带有代码的plunker。[注意：这只是示例代码。ng-options 的数组是从实际代码中的 angular factory 拉进来的，并且没有在作用域中声明。editDropdownOptionsArray 可能无法工作，因为数据是动态的。]
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!
是否可以使用 ui-grid 来做到这一点？我想这可能是范围的问题，因为如果我将 ng-option 代码放在我的 HTML 页面中，它会按预期工作，但是我可以从 ui-grid 文档中收集到的是 temp.html 文件应该在范围内. 我知道这些东西仍处于不稳定版本中，但对此事的任何帮助将不胜感激！
UPDATE 3/31/2015:2015/3/31 更新：
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
嗨，伙计们，如果您尝试此解决方案但它不起作用，请注意。一月份，外部作用域的代码从 重构getExternalScopes()为grid.addScope.source。https://github.com/angular-ui/ng-grid/issues/1379
Here's the updated plunkr with the new code: Click Me!
这是带有新代码的更新后的 plunkr：点击我！
采纳答案by jnkee
You would need to use the external-scopesfeature 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.
您需要在 ui-grid 的 3.x 版本中使用external-scopes功能。您无法在选择下拉列表中获得任何选项的原因是因为 ui-grid 现在使用隔离范围，这将不允许您在单元格中直接访问应用范围变量。
I was able to get your plunkr working with steps below - see updated plunkr
我能够通过以下步骤让您的 plunkr 工作 - 请参阅更新的 plunkr
Steps:
脚步：
1)Within index.html, specify the external-scopesattribute in the grid div i.e. modify
1）在index.html中，指定grid div中的external-scopes属性即修改
<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 the scope to our external-scope property i.e add this line:
2)在 app.js 中，将范围分配给我们的 external-scope 属性，即添加以下行：
$scope.myExternalScope = $scope;
3)Within temp.html, access the genderTypes array using getExternalScopes()i.e. modify editableCellTemplatevalue from
3）在temp.html中，使用getExternalScopes()访问genderTypes数组，即修改editableCellTemplate值
<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in genderType">
to
到
<select ng-model="row.entity.Gender" data-ng-options="d as d.type for d in getExternalScopes().genderTypes">
Extra Thoughts:
额外的想法：
1) I did not find the ui-grid/dropdownEditorsuitable for my needs - hence, did not try this out yet.
1) 我没有找到适合我需要的ui-grid/dropdownEditor- 因此，还没有尝试过。
2) You can add cellTemplatealso along with editableCellTemplate. You can assign both the same value.
2) 您还可以添加cellTemplate和editableCellTemplate。您可以为两者分配相同的值。
References:
参考：
回答by mainguy
Not sure if this may help you, because I'm also just starting to play around with the new ng-grid.
不确定这是否可以帮助您，因为我也刚刚开始使用新的 ng-grid。
It seems like a lot of options have changed. From what I learned I can tell you that there is no more need for a cellTemplate if you want to have a dropdown. It's already built in.
好像很多选项都变了。从我学到的我可以告诉你，如果你想要一个下拉菜单，就不再需要 cellTemplate 了。它已经内置了。
Activate it like this:
像这样激活它：
app.controller('MainCtrl', ['$scope', '$http',
function($scope, $http) {
$scope.genderTypes = [{
ID: 1,
type: 'female'
}, {
ID: 2,
type: 'female'
}, {
ID: 3,
type: 'both'
}, {
ID: 4,
type: 'none'
}, ];
$scope.gridOptions = {
enableSorting: true,
enableFiltering: true,
enableCellEditOnFocus: true,
columnDefs: [{
field: 'name',
sort: {
direction: 'desc',
priority: 1
}
}, {
field: 'gender',
editType: 'dropdown',
enableCellEdit: true,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownOptionsArray: $scope.genderTypes,
editDropdownIdLabel: 'type',
editDropdownValueLabel: 'type'
}, {
field: 'company',
enableSorting: false
}],
onRegisterApi: function(gridApi) {
grid = gridApi.grid;
}
};
$http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}
]);
I'm not quiet sure if I like this approach, but time and usage will tell ...
我不确定我是否喜欢这种方法，但时间和使用会告诉...
Oh, and I haven't found out how to detect changes. Still searching the (lousy) documentation for an event or if I have to watch grid-data for changes.
哦，我还没有找到如何检测变化。仍在搜索事件的（糟糕的）文档，或者我是否必须查看网格数据的更改。
Tell me if you have found something about this.
告诉我你是否发现了这方面的东西。
So far have fun with this Plunker
到目前为止，玩这个Plunker玩得开心
Update:
更新：
I found out how to react to a change. Add/Change these lines:
我发现了如何应对变化。添加/更改这些行：
onRegisterApi: function(gridApi) {
grid = gridApi.grid;
gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef) {
alert(rowEntity.name + ' ' + rowEntity.gender);
});
}
Alert pops up when you leave edit mode. e.g Click outside the cell.
当您离开编辑模式时会弹出警报。例如单击单元格外。
Hope this helps.
希望这可以帮助。
回答by Lukas D?rig
You can in fact use editDropdownOptionsArray. It's perfectly possible to edit it after initialisation!
你实际上可以使用editDropdownOptionsArray. 初始化后完全可以编辑它！
$scope.someFunction = function(){
$scope.coulmnDefs.columnDefs[1].editDropdownOptionsArray = [
{
title: 'Some changed option',
value: 'opt1'
},
{
title: 'Some other changed option',
value: 'opt2'
}
]
}
回答by Anshul
I merely corrected file path, and this error vanished. Noticed that, when I having wrong file path (file not existing there), then were seeing this error.
我只是更正了文件路径，这个错误就消失了。注意到，当我有错误的文件路径（文件不存在）时，就会看到这个错误。
