angular ui-grid filter issues with MALE/FEMALE

Question

Im using angular ui-grid, the bottom line is that I have a 'gender' column that has "MALE" and "FEMALE". When i click the "MALE" dropdown, all MALE and FEMALE show up (obviously because m-a-l-e is in f-e-m-a-l-e). How can I get the filter to differentiate between the two?

      {
        field: 'sex'
        , displayName: 'SEX'
        , width: '120'
        , editableCellTemplate: '<div><form name="inputForm"><input type="INPUT_TYPE" ng-class="\'colt\' + col.uid" ui-grid-editor ng-model="MODEL_COL_FIELD" style="border-bottom-color: #74B3CE; border-bottom-width: 2px;"></form></div>'
        , filter: {
            type: uiGridConstants.filter.SELECT,
            selectOptions: [
                { value: 'male', label: 'male' },
                { value: 'female', label: 'female' }
            ]
          }
      },

Answer 1

You can provide custom functions for filtering. Change your column def to have the custom filter function.

{
    filter: {
        type: uiGridConstants.filter.SELECT,
        selectOptions: [
            { value: 'male', label: 'male' },
            { value: 'female', label: 'female' }
        ],
        condition: customFilterSelected
      }
  },

and then define customFilterSelected

function customFilterSelected(function filterSelected(term, value, row, column) {
    return term === value;
}

this function is run everytime filter changes for each row. Parameter term is what the value of filter is and value is the value of current row. A row is show if this function returns true.