如何使用网格（不是输入字段）在标题上添加下拉菜单？答案

【问题标题】：how to add drop down on header using grid (not input field)?如何使用网格（不是输入字段）在标题上添加下拉菜单？
【发布时间】：2016-01-05 16:33:26
【问题描述】：

我正在尝试从此链接中使用 Ui-grid

http://ui-grid.info/docs/#/tutorial/101_intro.

我在 plunker 中做了一个 ui-grid 的简单示例。我需要在 "Gender" 上添加选择框作为过滤器。如果我选择 "male" 它仅显示“m”的数据或如果我选择 “female” 它仅显示过滤器数据“f”值这是我的代码

Plunkerhttps://plnkr.co/edit/DqBgHFnwLpYM5pvg0f56?p=preview 我尝试过这样但不行

type: uiGridConstants.filter.SELECT,
     selectOptions: [ 
         { value: 'm', label: 'male' },
         { value: 'F', label: 'female' }
     ];

我不需要性别输入字段。我需要选择框或性别列的下拉列表

【问题讨论】：

我认为没有问题，它可以工作。你遇到了什么问题？
我需要在标题上添加选择框 ..mean 过滤器..请检查这个 plunker plnkr.co/edit/?p=preview
gender has drop down ..过滤男性和女性我需要在我的问题插件中做同样的事情
请尝试添加给定或以上代码

标签： angularjs angularjs-directive angularjs-scope angular-ui-router angular-grid

【解决方案1】：

首先，您需要在控制器声明中添加 uiGridConstants 作为参数，以便您可以使用它。然后，您就可以为所欲为。

angular.module('app',['ngTouch', 'ui.grid'])
    .controller('MainCtrl',function( $scope, uiGridConstants ){

    // ...

    $scope.gridOptions = {
         enableFiltering: true,
         columnDefs: [
             {
                 field: 'gender', 
                 displayName:'Gender',
                 filter: { 
                     type: uiGridConstants.filter.SELECT,
                     selectOptions: [ 
                         { value: 'm', label: 'male' },
                         { value: 'F', label: 'female' }
                     ];
                 }
             },
             {field: 'name', displayName:'First'},
             {field: 'lastname', displayName:'Second',enableSorting: false}
         ]
    };

    // ...
}

我会给你一个建议：要调试 Angular 代码或任何 javascript 代码，请使用 Firebug（用于 Mozilla Firefox）之类的工具。它将向您显示当您更改代码并尝试应用它时遇到的 javascript 错误。在这种情况下，您会看到：

Error: uiGridConstants is not defined
@https://run.plnkr.co/8CvvTtAR4QY8O2Ln/app.js:30:11

【讨论】：

我刚刚 fork 你的 plunker 来向你展示结果。但这与我在上面粘贴的代码几乎相同。