动态更改 gridOptions columnDefs [英] Dynamically change gridOptions columnDefs
问题描述
在下面的 plunkr 中,我希望通过 ajax 调用动态填充性别下拉过滤器,但它似乎不起作用.
In the following plunkr I want the Gender dropdown filter to be populated dynamically by the ajax call, but it doesn't appear to work.
如果我注释掉第 17 行
If I comment out line 17
$scope.newSelectOptions=[{"value":"New Item 1","label":"New Item 1"},{"value":"New Item 2","label":"New Item 2"},{"value":"New Item 3","label":"New Item 3"},{"value":"New Item 4","label":"New Item 4"}];
它像我想要的那样工作(只是模拟它),但似乎发生的是在 columnDefs
之后,ajax 调用填充了变量 $scope.newSelectOptions
已创建.
it works like I would like (just simulating it), but what appears to happen is that the ajax call populates the variable $scope.newSelectOptions
after the columnDefs
has been created.
我尝试更改第 34 行:
I have tried changing line 34:
selectOptions: $scope.newSelectOptions
到:
selectOptions: newSelectOptions
selectOptions: 'newSelectOptions'
selectOptions: '$scope.newSelectOptions'
但它们都不起作用.
那么我如何动态地改变 selectOptions
或 $scope.gridOptions.columnDefs
中的其他对象?
So how can I dynamically alter that selectOptions
or other objects within the $scope.gridOptions.columnDefs
dynamically?
推荐答案
您可以将 Gender 列定义移动到其自己的 js 参考中,如下所示,
You can move the Gender column definition to its own js reference like below,
var genderColumn = { field: 'gender', filter: {
term: '1',
type: uiGridConstants.filter.SELECT,
//selectOptions: [ { value: '1', label: 'male' }, { value: '2', label: 'female' }, { value: '3', label: 'unknown'}, { value: '4', label: 'not stated' }, { value: '5', label: 'a really long value that extends things' } ]
selectOptions: []
},
cellFilter: 'mapGender', headerCellClass: $scope.highlightFilteredHeader };
并在 columnDef 中分配它,如下所示
and assign it in the columnDef like below
columnDefs: [
// default
{ field: 'name', headerCellClass: $scope.highlightFilteredHeader },
// pre-populated search field
genderColumn,
// no filter input
{ field: 'company', enableFiltering: false, filter: {
noTerm: true,
condition: function(searchTerm, cellValue) {
return cellValue.match(/a/);
}
}},
// specifies one of the built-in conditions
// and a placeholder for the input
{
field: 'email',
filter: {
condition: uiGridConstants.filter.ENDS_WITH,
placeholder: 'ends with'
}, headerCellClass: $scope.highlightFilteredHeader
},
// custom condition function
{
field: 'phone',
filter: {
condition: function(searchTerm, cellValue) {
var strippedValue = (cellValue + '').replace(/[^\d]/g, '');
return strippedValue.indexOf(searchTerm) >= 0;
}
}, headerCellClass: $scope.highlightFilteredHeader
},
// multiple filters
{ field: 'age', filters: [
{
condition: uiGridConstants.filter.GREATER_THAN,
placeholder: 'greater than'
},
{
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than'
}
], headerCellClass: $scope.highlightFilteredHeader},
// date filter
{ field: 'mixedDate', cellFilter: 'date', width: '15%', filter: {
condition: uiGridConstants.filter.LESS_THAN,
placeholder: 'less than',
term: nextWeek
}, headerCellClass: $scope.highlightFilteredHeader
}
]
并在 ajax 响应中,当您有新的选择选项时,将其设置在性别列上,如下所示.
and in the ajax response when you have the new select options set it on the gender column like below.
genderColumn.filter.selectOptions = [{"value":"New Item 1","label":"New Item 1"},{"value":"New Item 2","label":"New Item 2"},{"value":"New Item 3","label":"New Item 3"},{"value":"New Item 4","label":"New Item 4"}];
http://plnkr.co/edit/2Rbhz4XMSuhjvnO2IrR7?p=preview
这篇关于动态更改 gridOptions columnDefs的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!