如何使用网格(不是输入字段)添加标题下拉?

时间:2016-01-05 07:35:19

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

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

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

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

Plunker https://plnkr.co/edit/DqBgHFnwLpYM5pvg0f56?p=preview 我尝试但不能正常工作

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

我不需要性别上的输入字段。我需要在性别列

上选择框或下拉列表

1 个答案:

答案 0 :(得分:0)

首先,您需要在控制器声明中添加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}
         ]
    };

    // ...
}

我会给你一个建议:调试角度代码或任何javascript代码,使用Firebug之类的工具(适用于Mozilla Firefox)。它将向您显示更改代码时遇到的javascript错误,并且plunker尝试应用它。在这种情况下,你会看到这个:

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