在ui网格editableCellTemplate [ng-grid 3.x]中使用ng-option下拉列表

Question

我正在使用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

这是带有新代码的更新的plunkr：单击我！

Answer 1

您需要在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"></div>

至

<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 一起添加。您可以分配两个相同的值。

参考文献：

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