Custom filtering in Angular using ngTables is an advanced feature that allows

Question

Custom filtering in Angular using ngTables is an advanced feature that allows

I am currently working on implementing custom filtering in ngTables, similar to this example. I have a set of columns with standard text input filters, but for some of them, I want to utilize my own filtering function instead of the default angular

$filter('filter')(array, params.filter())

. I would like to use something like

$filter('myOwnFilter')(array, params.filter())

Filtering is handled in my controller:

var orderedData = params.filter() ? $filter('filter')(array, params.filter()) : array;

This is what I currently have in the code:

<td class="text-left" data-title="'Name'" filter="{ 'Column': 'myOwnFilter' }" data-sortable="'Column'">
  {{ array.Column }}
</td>

And here is the template section:

<script type="text/ng-template" id="ng-table/filters/myOwnFilter.html">
  <input type="text" name="myOwnFilter" data-ng-model="params.filter()[name]" data-ng-if="filter == 'myOwnFilter'" class="input-filter form-control"/>
</script>

javascript angularjs filtering ngtable

Answer 1

Answer №1

When addressing this issue with a custom "comparator" function in your controller, it's important to refer back to the guidance provided in this answer. A straightforward example of such a function could be as follows:

var myCustomComparator = function(value, searchTerm) {
    return (value || '').indexOf(searchTerm) > -1;
}

Subsequently, within your getData callback, you'll want to incorporate this custom comparator:

var orderedData = params.filter() ? $filter('filter')(array, params.filter(), myCustomComparator) : array;

It's worth noting that there may be instances where different comparators are required for various columns or fields, so ensure to evaluate the params.filter() accordingly.

For further information on the Angular documentation regarding the filter comparator, check out the provided link.

Answer 2

When addressing this issue with a custom "comparator" function in your controller, it's important to refer back to the guidance provided in this answer. A straightforward example of such a function could be as follows:

var myCustomComparator = function(value, searchTerm) {
    return (value || '').indexOf(searchTerm) > -1;
}

Subsequently, within your getData callback, you'll want to incorporate this custom comparator:

var orderedData = params.filter() ? $filter('filter')(array, params.filter(), myCustomComparator) : array;

It's worth noting that there may be instances where different comparators are required for various columns or fields, so ensure to evaluate the params.filter() accordingly.

For further information on the Angular documentation regarding the filter comparator, check out the provided link.

Answer 3

Answer №2

If you're looking to implement a filter that displays rows with an average property higher than your specified filter value:

Display

<td data-title="'Average'" sortable="'avg'" filter="{ 'min': 'number' }">

Code

vm.filtered = params.filter() ? applyFilter(params, vm.filtered) : vm.filtered;

Custom Filter

function applyFilter(params, data) {
              var min;
              if (params.filter() && params.filter().min) {
                  //remove default params.filter().min filter
                  min = params.filter().min;
                  delete params.filter().min;
                  //filter data by min
                  data = _.filter(data, function (d) { return min <= d.avg; });
              }
              //apply normal filter
              data = params.filter() ? $filter('filter')(data, params.filter()) : data;
              if (min != undefined)//re-add it
                  params.filter().min = min;
              return data;
          }

Answer 4

If you're looking to implement a filter that displays rows with an average property higher than your specified filter value:

Display

<td data-title="'Average'" sortable="'avg'" filter="{ 'min': 'number' }">

Code

vm.filtered = params.filter() ? applyFilter(params, vm.filtered) : vm.filtered;

Custom Filter

function applyFilter(params, data) {
              var min;
              if (params.filter() && params.filter().min) {
                  //remove default params.filter().min filter
                  min = params.filter().min;
                  delete params.filter().min;
                  //filter data by min
                  data = _.filter(data, function (d) { return min <= d.avg; });
              }
              //apply normal filter
              data = params.filter() ? $filter('filter')(data, params.filter()) : data;
              if (min != undefined)//re-add it
                  params.filter().min = min;
              return data;
          }

Custom filtering in Angular using ngTables is an advanced feature that allows

Answer №1

Answer №2

Similar questions

Ways to avoid Parents Click Event from triggering during a Child's (Grandchild's) click event

Highcharts: Show tooltip above all elements

developing a dynamic map with javascript

What's the scoop on NodeJS, Express, Nginx, and Jade?

What is the best way to implement a JavaScript pattern matching for both "aaaa" and "aaa aaa"?

Traverse a deeply nested JSON array within an Angular controller to extract distinct values

The md-autocomplete feature showcases search results in a list format rather than a dropdown menu

What is the best way to retrieve all string constants from HTML or JSX code?

Animating each individual element within the v-for loop in Vue.JS

Switching between API requests through a live feed

Enhancing Three.js interaction with the DOM (using linkify.js)

Troubleshooting Problem with Creating a Button using HTML Checkbox "onclick" Event

Direct AngularJS to automatically reroute users from the login page to the welcome page

The JQuery function .load() is not functioning correctly

The act of initiating a click on a radio button involves evaluating conditions prior to toggling

Is there a way to programmatically display an edit text field on an HTML page?

how to create a smooth transition back to the original state after a click event

Angular ng-repeat is incompatible with the JSON parser

Updating HTML in Vue.js with data at a specific index value can be done by targeting

Guide on using a pipe feature with varying arguments when the main function is called