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

时间:2014-10-07 21:19:26

标签: javascript angularjs grid ng-grid angular-ui-grid

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

以下是带有代码的plunker。 [注意:这只是示例代码。用于ng-options的数组正在实际代码中从角度工厂中提取,而不是在范围中声明。 editDropdownOptionsArray可能无效,因为数据是动态的。]

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

<小时/> 2015年3月31日更新:

大家好,如果您尝试使用此解决方案并且无效,请注意。 1月份,外部作用域的代码从getExternalScopes()重构为grid.addScope.sourcehttps://github.com/angular-ui/ng-grid/issues/1379

这是使用新代码更新的plunkr:Click Me!

4 个答案:

答案 0 :(得分:6)

不确定这是否对您有所帮助,因为我也刚刚开始使用新的ng-grid。

似乎很多选择都发生了变化。根据我的经验,我可以告诉你,如果你想要一个下拉列表,就不再需要一个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);
    });
  }

退出编辑模式时会弹出警报。例如,在单元格外单击。

希望这有帮助。

答案 1 :(得分:6)

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

我能让你的傻瓜使用以下步骤 - 见updated 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

答案 2 :(得分:1)

您实际上可以使用editDropdownOptionsArray。初始化后编辑它是完全可能的!

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

答案 3 :(得分:0)

我只纠正了文件路径,该错误消失了。注意,当我使用错误的文件路径(文件不存在)时,会看到此错误。