动态地改变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.

plunkr链接

如果我注释掉线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"}];

它就像我想（只是模拟它），但是这似乎发生的是，Ajax调用填充变量 $ scope.newSelectOptions 在 columnDefs 已创建。

我试图改变行34：

selectOptions: $scope.newSelectOptions

到

selectOptions: newSelectOptions
selectOptions: 'newSelectOptions'
selectOptions: '$scope.newSelectOptions'

但他们没有工作。

but none of them work.

所以，我怎么能动态地改变了 selectOptions 或在其他物体 $ scope.gridOptions.columnDefs 动态？

So how can I dynamically alter that selectOptions or other objects within the $scope.gridOptions.columnDefs dynamically?

推荐答案

您可以在性别列定义移动到其自身的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=$p$ PVIEW

这篇关于动态地改变gridOptions columnDefs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！