在 ui-grid editableCellTemplate [ng-grid 3.x] 中使用 ng-option 下拉菜单 [英] Using an ng-option dropdown in a ui-grid editableCellTemplate [ng-grid 3.x]

问题描述

我正在使用 ng-grid 的新 3.0 版本ui-grid在我的应用程序中制作网格.我想要做的是使我的表格中的一个可编辑单元格成为 ng-options 下拉列表，其中填充了使用 angular factory 检索到的数据.

我正在尝试使用 editableCellTemplate 功能用户界面网格.

这是一些示例代码:

HTML:

控制器:

$scope.gridOptions = {启用排序:真，启用过滤:真，enableCellEditOnFocus: 真,列定义:[{ 字段:'姓名'，种类: {方向:'desc'，优先级:1}},{ 字段:'性别'，editType:'下拉'，enableCellEdit:true，editableCellTemplate: 'temp.html' },{ 字段:'公司'，启用排序:false }]};

temp.html:

<select ng-model="row.entity.gender";data-ng-options=d as d.type for d ingenderType"><选项值="选择禁用>选择性别</选择>

这是带有代码的 plunker.[注意:这只是示例代码.ng-options 的数组是从实际代码中的 angular factory 拉进来的，并且没有在作用域中声明.editDropdownOptionsArray 可能无法工作，因为数据是动态的.]

是否可以使用 ui-grid 执行此操作?我想这可能是范围的问题，因为如果我将 ng-option 代码放在我的 HTML 页面中，它会按预期工作，但是我可以从 ui-grid 文档中收集到的是 temp.html 文件应该在范围内.我知道这个东西仍然处于不稳定的发布中，但对此事的任何帮助将不胜感激！

<小时>**更新 3/31/2015:**

请注意，如果您正在尝试此解决方案但它不起作用.一月份，外部作用域的代码从 getExternalScopes() 重构为 grid.addScope.source.https://github.com/angular-ui/ng-grid/issues/第1379章

这是带有新代码的更新版 plunkr:点击我！

解决方案

您需要在 3.x 版 ui-grid 中使用 external-scopes 功能.您无法在选择下拉列表中获得任何选项的原因是因为 ui-grid 现在使用隔离范围，这将不允许您在单元格中直接访问应用范围变量.

我能够通过以下步骤让您的 plunkr 工作 - 请参阅 更新笨蛋

步骤:

1) 在 index.html 中，指定网格 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() 访问性别类型数组，即修改 editableCellTemplate 值来自

到

额外的想法:

1) 我没有找到适合我需要的 ui-grid/dropdownEditor - 因此，还没有尝试过.

2) 您还可以添加 cellTemplate 和 editableCellTemplate.您可以为两者分配相同的值.

参考:

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

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.

I'm trying to do this by using the editableCellTemplate feature of the ui-grid.

Here is some example 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 as d.type for d in genderType">
        <option value="" selected disabled>Choose Gender</option>
    </select>
</div>

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.]

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!

---

**UPDATE 3/31/2015:**

Just a note if you are 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

Here's the updated plunkr with the new code: Click Me!

解决方案

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.

I was able to get your plunkr working with steps below - see updated plunkr

Steps:

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>

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:

$scope.myExternalScope = $scope;

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">

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/dropdownEditor suitable for my needs - hence, did not try this out yet.

2) You can add cellTemplate also along with editableCellTemplate. You can assign both the same value.

References:

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

这篇关于在 ui-grid editableCellTemplate [ng-grid 3.x] 中使用 ng-option 下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！