我正在使用ng-grid的新3.0版本 ui- grid在我的应用程序中创建网格。我想做的是使表中的可编辑单元格之一成为ng- options下拉列表,其中填充了使用角度工厂检索到的数据。
我正在尝试通过使用ui-grid 的editableCellTemplate功能来做到这一点。
这是一些示例代码:
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:
<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>
这是代码的小插曲。[ 注意: 这只是示例代码。ng- options的数组已从Angular工厂以实际代码插入,未在范围中声明。由于数据是动态的,editDropdownOptionsArray可能无法工作。]
可以用ui-grid做到吗?我认为这可能是范围的问题,因为如果我将ng-option代码放在HTML页面中,它将按预期工作,但是我可以从ui- grid文档中收集到的是temp.html文件应该在范围内。我知道这些内容仍处于不稳定版本中,但对此问题的任何帮助将不胜感激!
2015年3月31日更新:
嗨,大家好,如果您尝试使用此解决方案,但它不起作用,请注意。一月份,外部作用域的代码从重构getExternalScopes()为grid.addScope.source。https://github.com/angular- ui/ng-grid/issues/1379
getExternalScopes()
grid.addScope.source
这是带有新代码的更新的plunkr:单击我!
您需要在ui-grid的3.x版本中使用 external-scopes 功能。之所以无法在选择下拉列表中获得任何选项,是因为ui- grid现在使用隔离的作用域,这将不允许您在单元格中直接访问应用程序作用域变量。
我能够按照以下步骤操作您的plunkr- 查看最新的plunkr
脚步:
1) 在index.html中,在grid div中指定 external-scopes 属性,即修改
至
<div ui-grid="gridOptions" ui-grid-edit class="grid" external-scopes="myExternalScope"></div>
2) 在app.js中,将范围分配给我们的external-scope属性,即添加以下行:
$scope.myExternalScope = $scope;
3) 在temp.html中,使用 getExternalScopes() 访问sexTypes数组,即从以下位置修改 editableCellTemplate 值
<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-grid / dropdownEditor- 因此,还没有尝试过。
2)您还可以将 cellTemplate 与 editableCellTemplate 一起添加。您可以分配两个相同的值。
参考文献: