angularjs – Angular UI网格：如何为列过滤创建预先填充的下拉

我正在寻找有关 Angular UI Grid功能的一些帮助。具体来说，我正在探索 filtering，而我能够在我的应用程序中使用自由格式文本字段成功实现排序，就像在 example on their site中一样，我想要一些帮助一种方法可以使用某些列的预先填充的下拉菜单进行排序。

澄清：通过预先填充我的意思是我希望通过我的代码填充下拉列表。如果解决方案包含硬编码的数据，我可以确定，但是我的最终目标是让预先的人口由被排序的列的唯一数据值集合组成:)

我已经看到了这个功能(例如)Kendo UI(kendodropdownlist)，但是我对该解决方案带来的价格标签并不感兴趣。我想坚持上面提到的(和链接)角度的UI网格。在StackOverflow我发现一个similar question，但不幸的是，似乎没有得到太多的牵引力。我希望通过对我正在寻找的更详细的解释，我会收到比我在那里找到的更完整的答案。

这是我的控制器当前是什么

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;
    });

} ]);

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

对于这个具体的示例，客户，数量和当前日期我可能会以自由的形式下拉列表，但我真的希望能够使用预先填充的下拉列表进行过滤(并将其放在我的工具箱中)对于未来的项目当然！)。

谢谢！

angular.module('exampleApp',['ui.grid'])
  .controller('exampleCtrl',['$scope',uiGridConstants) {
    var animals = [
      { id: 1,type: 'Mammal',name: 'Elephant' },{ id: 2,type: 'Reptile',name: 'Turtle' },{ id: 3,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>