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

Question

我正在尝试使用 Ui-grid link

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

我在 plunker 中做了一个 ui-grid 的简单示例。我需要在 "Gender" 上添加 select 框作为过滤器。如果我 select "male" 它只显示 "m or If I select " 女性的数据 它只显示过滤数据 "f" 值这是我的代码

笨蛋 https://plnkr.co/edit/DqBgHFnwLpYM5pvg0f56?p=preview 我这样试过但不行

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

我不需要关于性别的输入字段。我需要 select 性别列的框或下拉列表

Answer 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 错误，并且 plunker 尝试应用它。在这种情况下，您会看到：

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

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

how to add drop down on header using grid (not input field)?

angularjs

angularjs-directive

angularjs-scope

angular-ui-router

angular-grid