AngularJS Example

HTML

<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css">
<div ng-app="app">
  <div ng-controller="MainCtrl">
    <h1>UI Grid Dropdown Filter Example</h1>
    <div ui-grid="animalGrid" class="grid"></div>
  </div>
</div>

JavaScript

var app = angular.module('app', ['ui.grid']);

app.controller('MainCtrl', ['$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: 'All',
    id: ''
  }, {
    value: 'Mammal',
    id: 'Mammal'
  }, {
    value: 'Reptile',
    id: 'Reptile'
  }];

  $scope.animalGrid = {
    enableFiltering: true,
    columnDefs: [{
      name: 'type',
      field: 'type',
      // template for rendering a custom dropdown box
      filterHeaderTemplate: '<div class="ui-grid-filter-container" ng-repeat="colFilter in col.filters"><div my-custom-dropdown></div></div>',
      filter: {
        // initialise the filter to 'All'
        term: '',
        // the dropdown options (used in the custom directive)
        options: animalTypes
      }
    }, {
      name: 'name',
      name: 'name'
    }],
    data: animals
  };
}]);

app.directive('myCustomDropdown', function() {
  return {
    template: '<select class="form-control" ng-model="colFilter.term" ng-options="option.id as option.value for option in colFilter.options"></select>'
  };
});