角度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網格列下拉選擇過濾器

回答

相關問題