Angularjs - Angular UI 网格:是否可以按 rowentity 值动态过滤下拉选项?
Angularjs - Angular UI Grid: It's possible to filter dynamically dropdown options by rowentity values?
我正在尝试使用 rowEntity 值过滤下拉选项。
$scope.data = [{
'id_a': 1,
'code': 1,
'line': 'Line 1 '
}, {
'id_a': 2,
'code': 2,
'line': 'Line 2'
}, {
'id_a': 3,
'code': 1,
'line': 'Line 3'
}, {
'id_a': 4,
'code': 3,
'line': 'Line 4'
}];
$scope.opts = [{
id: 1,
value: 'A',
code: 1
}, {
id: 2,
value: 'B',
code: 2
}, {
id: 3,
value: 'C',
code: 1
}, {
id: 4,
value: 'D',
code: 1
}, {
id: 5,
value: 'E',
code: 3
}, {
id: 6,
value: 'F',
code: 2
}];
$scope.columns = [{
field: 'line',
enableCellEdit: false,
enableFiltering: false
}, {
field: 'code',
enableCellEdit: false,
enableFiltering: false
}, {
field: 'value',
enableFiltering: false,
width: 500,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownIdLabel: 'id',
editDropdownValueLabel: 'value',
editDropdownOptionsArray: $scope.opts
}];
$scope.gridOptions = {
enableCellEditOnFocus: true,
enableFiltering: true,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
},
columnDefs: $scope.columns
};
$scope.gridOptions.data = $scope.data;
我想做的是在 editDropdownOptionsArray
中加载一个数组,然后使用一个值动态过滤这个数组。
如果我在 'Line 1' 中,则只能出现具有相同 'code' 值的选项。
在本例中 'Line 1' 的代码为“1”,则下拉选项为 'A'、'C'、'D'
我该怎么做?使用 cellFilter
?
Here is a plunker 与基本代码。
希望这对你有用,并随时接受它:
设置模板:
editableCellTemplate: 'dropdown.html'
将 dropdown.html
添加到您的项目中:
<select ng-model="MODEL_COL_FIELD" ng-options="item as item.value for
item in col.colDef.editDropdownOptionsArray | filter : { code:
row.entity.code}"></select>
- 测试:
在 KreepN 的解决方案之后,我对代码进行了一些升级,因为当我选择一个选项时我没有获得该行的值。
我在 select 上添加了 ui-grid-edit-dropdown
,问题就解决了。
再次感谢 KreepN 的解决方案。
我正在尝试使用 rowEntity 值过滤下拉选项。
$scope.data = [{
'id_a': 1,
'code': 1,
'line': 'Line 1 '
}, {
'id_a': 2,
'code': 2,
'line': 'Line 2'
}, {
'id_a': 3,
'code': 1,
'line': 'Line 3'
}, {
'id_a': 4,
'code': 3,
'line': 'Line 4'
}];
$scope.opts = [{
id: 1,
value: 'A',
code: 1
}, {
id: 2,
value: 'B',
code: 2
}, {
id: 3,
value: 'C',
code: 1
}, {
id: 4,
value: 'D',
code: 1
}, {
id: 5,
value: 'E',
code: 3
}, {
id: 6,
value: 'F',
code: 2
}];
$scope.columns = [{
field: 'line',
enableCellEdit: false,
enableFiltering: false
}, {
field: 'code',
enableCellEdit: false,
enableFiltering: false
}, {
field: 'value',
enableFiltering: false,
width: 500,
editableCellTemplate: 'ui-grid/dropdownEditor',
editDropdownIdLabel: 'id',
editDropdownValueLabel: 'value',
editDropdownOptionsArray: $scope.opts
}];
$scope.gridOptions = {
enableCellEditOnFocus: true,
enableFiltering: true,
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
},
columnDefs: $scope.columns
};
$scope.gridOptions.data = $scope.data;
我想做的是在 editDropdownOptionsArray
中加载一个数组,然后使用一个值动态过滤这个数组。
如果我在 'Line 1' 中,则只能出现具有相同 'code' 值的选项。
在本例中 'Line 1' 的代码为“1”,则下拉选项为 'A'、'C'、'D'
我该怎么做?使用 cellFilter
?
Here is a plunker 与基本代码。
希望这对你有用,并随时接受它:
设置模板:
editableCellTemplate: 'dropdown.html'
将
dropdown.html
添加到您的项目中:
<select ng-model="MODEL_COL_FIELD" ng-options="item as item.value for item in col.colDef.editDropdownOptionsArray | filter : { code: row.entity.code}"></select>
- 测试:
在 KreepN 的解决方案之后,我对代码进行了一些升级,因为当我选择一个选项时我没有获得该行的值。
我在 select 上添加了 ui-grid-edit-dropdown
,问题就解决了。
再次感谢 KreepN 的解决方案。