I've been struggling for more than 1 day trying to find a solution to pre-fill angular-ui-grid dropdown with data from the backend. And yes, I've seen many similar questions, but none of them talks about filling a selectOption with real data from backend.
It works fine with a pre-defined array like this: $scope.tiposArquivoSelecionados = [{ value: 1, label: 'First'}, { value: 2, label: 'Second'}, { value: 3, label: 'Third'}];
But when I try to fill the selectOption with data gathered from backend, the selectOption is not displayed. Take a look:
The data is gathered successfully, the grid is rendered successfully, what makes me think it's a timing problem.
Here is a list of a few workarounds I tried (all failed) to solve the possible timing problem:
- refresh the grid after gathering the data;
- put the columnDefs inside the service success callback
- put a ng-if in the .html to display the grid only if the array.length > 0
None of them worked =/
selectOptions array declaration:
$scope.tiposArquivoGridSelectOptions = [];
Code from the GridOptions.columnDefs:
{
field: 'controleArquivoId',
name: 'Tipo de Arquivo',
cellClass: 'ui-grid-cell-padding',
enableFiltering: true,
enableSorting: true,
enableHiding: true,
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: $scope.tiposArquivoGridSelectOptions,
},
sort: {
direction: uiGridConstants.ASC,
priority: 3
}
},
In my controller, I have the init() method, which calls the service to gather the data from the backend and fills the selectOption array.
AutorizacoesReenvioService.listarTiposArquivoPorAno(moment().year()).then(
function (success) {
var responseData = success.data;
responseData.forEach(function(item) {
$scope.tiposArquivoGridSelectOptions.push(
{
value: item.id,
label: item.nomeArquivo
}
);
});
$scope.gridApi.core.refresh();
},
function (error) {
console.error(success.data);
}
);

