Динамическое изменение gridOptions columnDefs

Question

В следующем plunkr Я хочу, чтобы фильтр dropdown Gender был динамически заполнен вызовом ajax, но он не работает.

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"}]; 

это работает, как я хотел бы (просто имитируя его), но кажется, что произойдет в том, что вызов Ajax заполняет переменную $scope.newSelectOptions после columnDefs был создан.

Я попытался линию 34 изменения:

selectOptions: $scope.newSelectOptions 

к:

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

, но ни один из них не работает.

Так как же я могу динамически изменять этот selectOptions или другие объекты в пределах $scope.gridOptions.columnDefs динамически?

Answer 1

Вы можете переместить определение Пол колонки к своему 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 
     } 
    ] 

и в ответ АЯКС, когда у вас есть новые параметры выбора устанавливают его в столбце пола, как показано ниже.

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

Answer 2

когда вы получите ответ от сервера, получить номер столбца, к которому вы хотите присвоить записи и установить значения для него выберите Функции например

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" 
    } 
]