我正在使用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.source
。 https://github.com/angular-ui/ng-grid/issues/1379
这是使用新代码更新的plunkr:Click Me!
答案 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 。您可以指定两个相同的值。
<强>参考文献:强>
答案 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)
我只纠正了文件路径,该错误消失了。注意,当我使用错误的文件路径(文件不存在)时,会看到此错误。