Colonne ui-grille angulaire dropdown sélectionner filtre

Question

J'essaye de faire un filtre déroulant pour ui-grille angulaire. J'ai trouvé à l'origine le how-to article here, et sur ne pas être en mesure de travailler, je suis retourné à the source pour essayer de le travailler. Je n'ai toujours pas de succès. le filtre de colonne ressemble à un filtre normal, sans aucune liste déroulante. Quelqu'un peut-il m'aider à réparer?

Colonne def:

{ 
field: 'sex' 
, displayName: 'SEX' 
, width: '120' 
, type: uiGridConstants.filter.SELECT 
, filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ] } 
} 

Voici comment il semble (si je clique sur l'entrée, son accepte tout texte)

Y at-il quelque chose d'autre im manquant?

MISE À JOUR ----- AVEC MON ENTIER SETUP -----------

//options for the main grid 
     $scope.gridOptions = { 
     enableFiltering: true, 
     multiSelect: false, 
     onRegisterApi: function(gridApi){ 
      $scope.gridApi = gridApi; //so we can use gridapi functions of ui-grid 

      //handler for clicking rows and getting row object 
      gridApi.selection.on.rowSelectionChanged($scope, function(row){ 
      thisRow = gridApi.selection.getSelectedRows() //gets the clicked row object 
      console.log(thisRow[0].uniqueId) 

      }); 
     }, 
     data: 'myData' 
     , rowTemplate: rowTemplate() 
     , columnDefs: [ 
      { 
      field: 'alert' 
      , displayName: 'ALERTS' 
      , width: '70' 
      , headerCellClass: $scope.highlightFilteredHeader 
      ,sort: { 
       direction: uiGridConstants.DESC, 
       priority: 1 
       } 

      }, 
      { 
      field: 'firstName' 
      , displayName: 'FIRST NAME' 
      , width: '130' 
      , headerCellClass: $scope.highlightFilteredHeader 

      }, 
      { 

      field: 'lastName' 
      , displayName: 'LAST NAME' 
      , width: '130' 
      , headerCellClass: $scope.highlightFilteredHeader 
      }, 
      { 
      field: 'dob' 
      , displayName: 'DOB' 
      , width: '130' 
      , headerCellClass: $scope.highlightFilteredHeader 
      }, 
      { 

      field: 'careCoordinatorName' 
      , displayName: 'Care Coordinator Name' 
      , width: '130' 
      , headerCellClass: $scope.highlightFilteredHeader 
      }, 
      { 
      field: 'userStatus' 
      , displayName: 'STATUS' 
      , width: '130' 
      , headerCellClass: $scope.highlightFilteredHeader 
      }, 
      { 
      field: 'homeNum' 
      , displayName: 'PATIENT HOME #' 
      , width: '130' 
      , headerCellClass: $scope.highlightFilteredHeader 
      }, 
      { 
      field: 'cellNum' 
      , displayName: 'PATIENT CELL #' 
      , width: '130' 
      , headerCellClass: $scope.highlightFilteredHeader 
      }, 
      { 
      field: 'mi' 
      , displayName: 'MI' 

      , width: '60' 
      , headerCellClass: $scope.highlightFilteredHeader 
      }, 
      { 
      field: 'sex' 
      , displayName: 'SEX' 
      , width: '120' 
      , type: uiGridConstants.filter.SELECT 
      , filter: { selectOptions: [ { value: 'male', label: 'male' }, { value: 'female', label: 'female' } ] } 
      } 

     ] 

     }; 

modèle de ligne (le cas échéant):

function rowTemplate() { 
     return '<div ng-dblclick="grid.appScope.rowDblClick(row)" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + \'-\' + col.uid + \'-cell\'" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" role="{{col.isRowHeader ? \'rowheader\' : \'gridcell\'}}" ui-grid-cell></div>'; 
     } 

Grille HTML

<div id="grid1" ui-grid="gridOptions" ui-grid-importer class="grid" ui-grid-resize-columns ui-grid-move-columns ui-grid-auto-resize ui-grid-edit ui-grid-selection ui-grid-cellNav ui-grid-paging external-scopes="gridHandlers"></div> 

------ ----------- MISE à JOUR 2 Après avoir changé COLDEF à

{ 
field: 'sex', 
displayName: 'SEX', 
width: '120', 
//type: uiGridConstants.filter.SELECT, 
filter: { 
    type: uiGridConstants.filter.SELECT, // <- move this to here 
    selectOptions: [ 
     { value: 'male', label: 'male' }, 
     { value: 'female', label: 'female' } 
    ] 
} 

}

Voici comment ma colonne ressemble maintenant (avec une autre colonne à gauche pour la comparaison)

------ MISE A JOUR 3 --------- - Lorsque j'ai inspecté la zone, j'ai pu voir le code de la sélection. Donc, ne nous connaissons son là, juste pas montrer

----- MISE A JOUR 4 ---------- Materializecss faisait invisible. il était là tout le temps

select { 
display: inline !important; 
height: 15px !important; 

}

a résolu le problème

Answer 1

Ah, je crois que votre problème est que l'option de type pour l'COLDEF est au mauvais endroit. J'ai élargi un peu le code pour plus de lisibilité; vous pouvez facilement vous perdre dans les objets s'ils sont trop compressés.

Qu'est-ce que vous avez:

{ 
    field: 'sex', 
    displayName: 'SEX', 
    width: '120', 
    type: uiGridConstants.filter.SELECT, 
    filter: { 
     selectOptions: [ 
      { value: 'male', label: 'male' }, 
      { value: 'female', label: 'female' } 
     ] 
    } 
} 

ce qu'il devrait être:

{ 
    field: 'sex', 
    displayName: 'SEX', 
    width: '120', 
    //type: uiGridConstants.filter.SELECT, 
    filter: { 
     type: uiGridConstants.filter.SELECT, // <- move this to here 
     selectOptions: [ 
      { value: 'male', label: 'male' }, 
      { value: 'female', label: 'female' } 
     ] 
    } 
}