Angular UI Grid filter only applies to beginning of cell value

Question

I'm using an Angular UI Grid in my app. I set enableFiltering to true in the options which made some filter boxes show up above my columns. This is great, but the filters don't work exactly as desired.

If a cell contains the text "I like pizza" and I type "I like", that cell's row is shown as a match. I would also think that if I type "pizza", the "I like pizza" cell/row should show up, but that's not the case.

How can I get the filters to allow searching anywhere in the text, not just from the beginning?

Answer 1

You can use filter: {condition: uiGridConstants.filter.CONTAINS} in the column definition to allow that column to search anywhere in the text.

Here's a sample column definition with this in place:

columnDefs: [
  // default
  { field: 'name',
    filter: {condition: uiGridConstants.filter.CONTAINS} },
  ...

Answer 2

You can pass a custom filter object that takes a condition property, which can be a function that takes searchTerm and cellValue. Will display if the function returns true. Plunkr

  { field: 'name', filter: {
    condition: function(searchTerm, cellValue) {
      return cellValue.indexOf(searchTerm) > -1
    }
  }}