动态改变 gridOptions columnDefs答案

【问题标题】：Dynamically change gridOptions columnDefs动态改变 gridOptions columnDefs
【发布时间】：2015-07-23 20:32:26
【问题描述】：

在下面的 plunkr 中，我希望通过 ajax 调用动态填充 Gender 下拉过滤器，但它似乎不起作用。

plunkr link

如果我注释掉第 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。

我已尝试更改第 34 行：

selectOptions: $scope.newSelectOptions

到：

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

但它们都不起作用。

那么我怎样才能动态地改变selectOptions 或$scope.gridOptions.columnDefs 中的其他对象呢？

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案1】：

您可以将 Gender 列定义移动到其自己的 js 引用中，如下所示，

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 中，如下所示

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 响应中，当您在性别列上设置新的选择选项时，如下所示。

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

【讨论】：

【解决方案2】：

当您从服务器获得响应时，获取要为其分配记录的列号并为其设置 selectOptions 值例如

vm.gridOptions.columnDefs[7].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"
  }
]

【讨论】：