Angular ui-grid 列下拉选择过滤器

Question

我正在尝试为角度 ui-grid 制作一个下拉过滤器。我最初在这里找到了操作方法文章，在无法使用它时，我回到源头尝试使用它。我仍然没有成功。列过滤器看起来像一个普通过滤器，没有任何下拉菜单。有人可以帮我解决吗？

列定义：

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

这是它的外观（如果我点击输入，它只接受文本）

我还缺少其他东西吗？

-----更新我的整个设置-----

//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' } ]  }
          }

        ]

      };

行模板（如果相关）：

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>';
      }

网格 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>

------更新 2------------ 将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' }
    ]
}

}

这就是我的专栏现在的样子（左侧有另一列用于比较）

------UPDATE 3----------- 当我检查该区域时，我可以看到选择的代码。所以不，我们知道它在那里，只是没有显示

-----更新 4--------- Materializecss 使其不可见。它一直在那里

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

}

解决了问题

Answer 1

啊，我相信您的问题是coldef 的类型选项位于错误的位置。为了便于阅读，我对代码进行了一些扩展；如果它们太压缩，您很容易迷失在对象中。

你有什么：

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

它应该是什么：

{
    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' }
        ]
    }
}