在UI网格使用NG选项下拉editableCellTemplate [NG网3.X] [英] Using an ng-option dropdown in a ui-grid editableCellTemplate [ng-grid 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.

参考文献：

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

这篇关于在UI网格使用NG选项下拉editableCellTemplate [NG网3.X]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！