角度ui网格列下拉选择过滤器

我想为角度ui网格做一个下拉式过滤器。我最初发现了如何操作文章here，并且由于无法工作，我回到the source尝试工作。我仍然没有成功。列过滤器看起来像一个常规过滤器，没有任何下拉菜单。有人可以帮我修理它吗？角度ui网格列下拉选择过滤器

列DEF：

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

     ] 

     };

行模板

----- UPDATE（如相关）：

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>

------ UPDATE 2 ----------- coldef改变到

0123后

{ 
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 --------- - 当我检查该区域时，我可以看到选择的代码。因此，没有，我们知道它的存在，它只是没有显示

----- UPDATE 4 ---------- Materializecss是使其不可见。它在那里的全部时间

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

}

解决了这个问题

来源

2016-12-13 IWI

我看起来好像应该与您发布的代码工作，你可能不得不表现出更多的，你怎么有设置用户界面 –

嗨，乔恩，刚刚添加我的gridoptions设置。让我知道你是否需要看其他信息。谢谢！ – IWI

啊，我相信你的问题是，对于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' } 
     ] 
    } 
}

来源

2016-12-14 12:26:24 Brian

感谢Brian的帮助。问题已解决。 – IWI

角度ui网格列下拉选择过滤器

回答

相关问题