Angular UI-Grid How to filter by display value instead of actual value?

Question

I have a gender column in my grid and its actual value is a integer and it gets transformed into strings such as Male, Female etc... Filtering won't work if I try to filter it by the text, filtering by actual integer value works fine.

How can I filter it by the text that is displayed rather than the value behind the text?

Plunker http://plnkr.co/edit/JgjKWsVWCV7v4hA8mak3?p=preview

Thank you.

Answer 1

There is a better way to do this by using the dropdown instead of a textbox. Since you will have male/female as the options you can add a dropdown and use that to filter.

http://ui-grid.info/docs/#/tutorial/103_filtering has that approach clearly explained.

But if you really want to search based on a textbox input, you can as well do that using a condition property on the filter. This function will compare the values in the textbox with the values in the cells, but you can reverse lookup the male/female values and return true or false.

The example basically has 1 as male and 2 as female.

 { field: 'gender', filter: {
        condition: function(searchTerm, cellValue) {

          if("male".match(searchTerm))
          {
            return cellValue.match(1);
          }
          if("female".match(searchTerm))
          {
            return cellValue.match(2);
          }
          return false;
        }

      },

This plnkr shows that http://plnkr.co/edit/trJeHAG908NiEQM7TXrd?p=preview