Angular UI Grid:如何为列过滤创建预填充的下拉菜单 [英] Angular UI Grid: How to create a pre-populated dropdown menu for column filtering

问题描述

我正在寻找有关

示例:

angular.module('exampleApp', ['ui.grid']).controller('exampleCtrl', ['$scope', 'uiGridConstants', function($scope, uiGridConstants) {var 动物 ​​= [{ id: 1, 类型: '哺乳动物', 名称: '大象' },{ id: 2, type: 'Reptile', name: 'Turtle' },{ id:3，类型:'哺乳动物'，名称:'人类'}];var 动物类型 = [{值:'哺乳动物'，标签:'哺乳动物'}，{ 值:'爬虫'，标签:'爬虫'}];$scope.animalGrid = {启用过滤:真，列定义:[{名称:'类型'，字段:'类型'，过滤器:{选择选项:动物类型，类型:uiGridConstants.filter.SELECT}},{名称:'名称'，名称:'名称'}],数据:动物};}]);

<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 网格下拉过滤器示例</h1><div ui-grid="animalGrid" class="grid"></div>

I am looking for some help regarding a feature of the Angular UI Grid. Specifically I am exploring filtering and while I was able to successfully implement sorting using free form text field(s) in my application as they do in the example on their site I would like some help finding a way to instead sort using a pre-populated drop-down menu for certain columns.

To clarify: By pre-populated I mean I would like the drop-down to be populated through my code. I am ok if the solution contains hard-coded data but my eventual goal would be to have the pre-population be comprised of the unique data value set of the column being sorted :)

I have seen this functionality in (for example) the Kendo UI (kendodropdownlist) but I am not interested in the price tag that comes along with that solution. I would like to stick with the Angular UI-grid mentioned (and linked) above. On StackOverflow I found one similar question but unfortunately it didn't seem to have gotten much traction. I am hoping that by giving a more detailed explanation of what I am looking for I will receive a more complete answer than I found there.

Here is what is currently in my controller:

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

} ]);

Below is the output - with the free-form text fields

For this specific example columns Customer, Quantity, and Current Date I would probably leave as free form drop downs, but I would really like to be able to filter using a pre-populated drop down for the transactions (and to have it in my toolbox for future projects of course!).

Thanks!

解决方案

You can use the built in selectOptions filter feature documented here: http://ui-grid.info/docs/#/tutorial/103_filtering

Example:

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>

这篇关于Angular UI Grid:如何为列过滤创建预填充的下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！