Angular UI Grid：如何创建用于列过滤的预填充下拉菜单

Question

我正在寻找有关 Angular UI Grid 功能的帮助。具体来说，我正在研究
过滤 ，尽管我能够 像我
在其网站上 的
示例中
那样在应用程序中使用自由格式文本字段成功实现排序，但 我希望能有所帮助，找到一种方法来使用预先填充的 文本字段 进行排序某些列的下拉菜单 。

需要说明的是： 通过预填充，我的意思是我希望通过我的代码填充下拉列表。我很好，如果解决方案包含硬编码数据，但我的最终目标是让预填充包含要排序的列的
唯一 数据值集：）

我已经在KendoUI（例如Kendodropdownlist）中看到了此功能，但是我对该解决方案附带的价格标签不感兴趣。我想坚持上面提到（和链接）的AngularUI网格。在StackOverflow上，我发现了一个类似的问题，但是不幸的是，它似乎并没有受到太大的关注。我希望通过对要查找的内容进行更详细的说明，我将得到比在此找到的更完整的答案。

这是我的控制器中当前的内容：

var simpleMessagingApp = angular.module('MainAppCtrl', [ 'ngAnimate',
                                                         'ngTouch', 'ui.grid' ]);

simpleMessagingApp.controller('CacheTableCtrl', [ '$scope', '$http',
                                                  'uiGridConstants', function($scope, $http, uiGridConstants) {
    $scope.columns = [ {
        field : 'trans_detail',
        displayName : 'Transaction'
    }, {
        field : 'cust_name',
        displayName : 'Customer'
    }, {
        field : 'quantity',
        displayName : 'Quantity',
        filters : [ {
            condition : uiGridConstants.filter.GREATER_THAN,
            placeholder : 'greater than'
        }, {
            condition : uiGridConstants.filter.LESS_THAN,
            placeholder : 'less than'
        }
        ]
    }, {
        field : 'today_date',
        displayName : 'Current Date'
    } ];
    $scope.gridOptions1 = {
            enableSorting : true,
            enableFiltering : true,
            columnDefs : $scope.columns,
            onRegisterApi : function(gridApi) {
                $scope.grid1Api = gridApi;
            }
    };

    $http.get("../services/Coherence/Cache").success(function(data) {
        $scope.gridOptions1.data = data;
    });

} ]);

以下是输出-带有自由格式的文本字段

对于此特定示例，“客户”，“数量”和“当前日期”列可能会保留为自由格式下拉列表，但我真的很希望能够使用预先填充的交易下拉列表进行过滤（并将其放在我的工具箱中）当然用于未来的项目！）。

谢谢！

Answer 1

您可以使用此处记录的内置selectOptions过滤器功能：http ://ui-
grid.info/docs/#/tutorial/103_filtering

例：

angular.module('exampleApp', ['ui.grid'])

  .controller('exampleCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {

    var animals = [

      { id: 1, type: 'Mammal', name: 'Elephant' },

      { id: 2, type: 'Reptile', name: 'Turtle' },

      { id: 3, type: 'Mammal', name: 'Human' }

    ];



    var animalTypes = [

      { value: 'Mammal', label: 'Mammal' },

      { value: 'Reptile', label: 'Reptile'}

    ];



    $scope.animalGrid = {

      enableFiltering: true,

      columnDefs: [

        {

          name: 'type',

          field: 'type',

          filter: { selectOptions: animalTypes, type: uiGridConstants.filter.SELECT }

        },

        { name: 'name', name: 'name'}

      ],

      data: animals

    };



  }]);


<link href="http://ui-grid.info/release/ui-grid.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<script src="http://ui-grid.info/release/ui-grid.js"></script>



<div ng-app="exampleApp">

  <div ng-controller="exampleCtrl">

    <h1>UI Grid Dropdown Filter Example</h1>

    <div ui-grid="animalGrid" class="grid"></div>

  </div>

</div>