小编典典

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

angularjs

我正在使用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.sourcehttps://github.com/angular-
ui/ng-grid/issues/1379

这是带有新代码的更新的plunkr:单击我!


阅读 456

收藏
2020-07-04

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

参考文献:

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