Angular ui-网格列下拉列表 select 过滤器

Question

我正在尝试为 angular ui-网格制作下拉过滤器。我最初找到了操作方法文章 , and upon not being able to work it, i went back to the source 来尝试使用它。我仍然没有成功。列筛选器看起来就像一个常规筛选器，没有任何下拉列表。有人可以帮我解决吗？

定义列：

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

}

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

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

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

Angular ui-网格列下拉列表 select 过滤器

Angular ui-grid column dropdown select filter

ng-grid

angular-ui-grid