使用ui grid editableCellTemplate中的ng选项下拉列表[ng grid3.x]

Using an ng-option dropdown in a ui-grid editableCellTemplate [ng-grid 3.x]

本文关键字：ng grid3 下拉列表 选项 grid editableCellTemplate 中的 使用 ui      更新时间：2023-09-26

我正在使用ng grid的新3.0版本ui grid在我的应用程序中创建网格。我想做的是使表中的一个可编辑单元格成为ng选项下拉列表，其中填充了使用角度工厂检索的数据。

我试图通过使用ui网格的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>

这是一个带有代码的plunker。[注意：这只是示例代码。ng选项的数组是从实际代码中的角度工厂中提取的，而不是在范围中声明的。editDropdownOptionsArray可能无法工作，因为数据是动态的。]

使用ui网格可以做到这一点吗？我认为这可能是范围的问题，因为如果我将ng选项代码放在HTML页面中，它会按预期工作，但我可以从ui网格文档中收集到的是temp.HTML文件应该在范围中。我知道这个东西的发布仍然不稳定，但如果有任何帮助，我们将不胜感激！

**2015年3月31日更新：**

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

这是更新后的plunkr，带有新代码：点击我！

您需要在3.x版本的ui网格中使用外部作用域功能。您无法在选择下拉列表中获得任何选项的原因是，ui网格现在使用独立的范围，这将不允许您在单元格中直接访问应用程序范围变量。

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

步骤：

1）在index.html中，在网格div中指定外部作用域属性，即修改

<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中，将作用域分配给我们的外部作用域属性，即添加此行：

$scope.myExternalScope = $scope;

3）在temp.html中，使用getExternalScopes（）访问genderTypes数组，即修改中的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

不确定这是否会对您有所帮助，因为我也刚刚开始使用新的ng网格。

看起来很多选择都变了。根据我所学到的，我可以告诉你，如果你想有一个下拉列表，就不需要cellTemplate了。它已经内置了。

像这样激活它：

app.controller('MainCtrl', ['$scope', '$http',
  function($scope, $http) {
    $scope.genderTypes = [{
      ID: 1,
      type: 'female'
    }, {
      ID: 2,
      type: 'female'
    }, {
      ID: 3,
      type: 'both'
    }, {
      ID: 4,
      type: 'none'
    }, ];

    $scope.gridOptions = {
      enableSorting: true,
      enableFiltering: true,
      enableCellEditOnFocus: true,
      columnDefs: [{
        field: 'name',
        sort: {
          direction: 'desc',
          priority: 1
        }
      }, {
        field: 'gender',
        editType: 'dropdown',
        enableCellEdit: true,
        editableCellTemplate: 'ui-grid/dropdownEditor',
        editDropdownOptionsArray: $scope.genderTypes,
        editDropdownIdLabel: 'type',
        editDropdownValueLabel: 'type'
      }, {
        field: 'company',
        enableSorting: false
      }],
      onRegisterApi: function(gridApi) {
        grid = gridApi.grid;
      }
    };
    $http.get('https://rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
      .success(function(data) {
        $scope.gridOptions.data = data;
      });
  }
]);

我不确定我是否喜欢这种方法，但时间和用法会告诉你。。。

哦，我还没有找到如何检测变化。仍然在（糟糕的）文档中搜索事件，或者如果我必须观察网格数据的变化。

告诉我你是否对此有所发现。

到目前为止，玩这个Plunker 很开心

更新：

我发现了如何应对变化。添加/更改这些行：

  onRegisterApi: function(gridApi) {
    grid = gridApi.grid;
    gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef) {
      alert(rowEntity.name + ' ' + rowEntity.gender);
    });
  }

当您离开编辑模式时，会弹出警报。例如在单元格外单击。

希望这能有所帮助。

您实际上可以使用editDropdownOptionsArray。初始化后完全可以对其进行编辑！

$scope.someFunction = function(){
  $scope.coulmnDefs.columnDefs[1].editDropdownOptionsArray = [
    {
      title: 'Some changed option',
      value: 'opt1'
    },
    {
      title: 'Some other changed option',
      value: 'opt2'
    }
  ]
}

我只是更正了文件路径，这个错误就消失了。注意到，当我有错误的文件路径（文件不存在），然后看到这个错误。

相关文章：