Tips for sorting ng-Table using an array of numerous values

I am currently working on implementing angular-selectize.js (https://github.com/machineboy2045/angular-selectize) into my project. This will create a search box that allows for entering multiple values to filter all cells in an ng-Table without the need to specify which columns should be filtered. It's similar to using filter:search on ng-repeat, but with the ability to filter by multiple values simultaneously.

Check out the Plunker demo here: http://plnkr.co/edit/701op5FQ0PRJ5FOlF5Mq?p=preview

javascriptangularjsfilterngtableselectize.js

Answer №1

After some experimentation, I successfully implemented a custom filter. Plunker: http://plnkr.co/edit/701op5FQ0PRJ5FOlF5Mq?p=preview

.filter('filterSelectize', function($filter){
  return function(cars, multiArray) {
    if(multiArray.length >= 1){
      var filteredCars = cars;
      for(i=0; i < multiArray.length; i++){
        var filteredCars = $filter('filter')(filteredCars, multiArray[i]);
      }
      return filteredCars;
    }
    else {
      return cars;
    }
  }
})

Answer №2

If you prefer, you can also follow the "official" ngTable approach using the filter key $:

function executeGlobalSearch(){
      var searchQuery = self.globalSearchTerm;
      if (self.isInvertedSearch){
        searchQuery = "!" + searchQuery;
      }
      self.tableParams.filter({ $: searchQuery });
    }

Visit this link for more information.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for preventing the extraction of resolve from promises and initiating a process before a callback

There is a common pattern I frequently find myself using: const foo = () => { const _resolve; const promise = new Promise(resolve => _resolve = resolve); myAsyncCall(_resolve); return (dataWeDontHaveYet) => promise.then(cb => c ...

javascriptpromisegenerator

Issue with continuous loader malfunction

I integrated a 3-second mini-loading animation on my website. It shows up every time I refresh the site or navigate to another page. The issue I'm facing is that once I add the loading section, it never stops (it should only last for 3 seconds). Usua ...

javascripthtmljquerycss

What could be causing my Vue component to not refresh?

Can anyone help me figure out why this component isn't re-rendering after changing the value? I'm attempting to create a dynamic filter similar to Amazon using only checkboxes. Here are the 4 components I have: App.vue, test-filter.vue, filtersIn ...

javascriptvue.jsvuejs2vue-component

Explore the various timer functionalities available in Angular.js

I am working on a project that requires displaying two timers on a webpage, each with different start times. The first timer should only show for 5 seconds, and then after 10 seconds, the second timer should be displayed. I am new to Angular and have writ ...

javascriptangularjstimer

Modify the BehaviorSubject upon clicking or focusing on the input

I have created a directive for an input field. I want to trigger a flag in another component when the input is clicked or focused upon. @Directive({ selector: '[appDatepicker]' }) export class DatepickerDirective implements DoCheck{ constru ...

javascriptangulartypescript

The function initFoodModel is missing and causing issues as it tries to read properties of undefined, specifically attempting to read 'findAll'

myWishlist.js const { setupFoodModel } = require("../../model/FoodModel"); const { setupWishlistModel } = require("../../model/myWishlistModel"); const setupMyWishlistModel = async () =\> { try { const sequelizeConnection = awai ...

javascriptnode.jsexpress

Issue with Vue.js: Child component emitting event but parent component method not triggering

When a child component makes an input change, it emits an event with some data: Vue.component('gum-option', { inheritAttrs: false, props: ['label'], template: ` <label class="gum-option"> ...

javascriptvue.jseventscomponentsemit

The routeLink feature is unable to display the URL dynamically

<table class="table"> <thead> <tr> <th>Name</th> <th>Price</th> <th></th> </tr> </thead> <tbody> <t ...

javascriptangularrxjsangular-cli

Expanding a non-bootstrap navigation bar upon clicking the menu

I'm having some difficulty getting my navigation menu to show up when I click the navigation menu icon. HTML nav role="navigation" class="navbar"> <div class="nav-header"> <a href="#"><span style="font-family: 'Cab ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for hiding infowindow on mouse click beyond or away from the map?

Is there a way to close the infowindow when clicking either on the map or outside of it? For example: google.maps.event.addListener(map, "click", function(event) { infowindow.close(); }); How can I incorporate this code in ng-map? ...

angularjsng-map

Issue with dropdown list functionality in Internet Explorer not functioning correctly

I am experiencing an issue with my dropdown lists. When selecting an item from the first dropdown list, it should not be available in the second dropdown list. To achieve this functionality, I have implemented jQuery code like the following: $(document).r ...

javascriptjquery

Steps for dynamically adjusting form fields depending on radio button selection

I am looking to create a dynamic form that changes based on the selection of radio buttons. The form includes textfields Field A, Field B, ..., Field G, along with radio buttons Radio 1 and Radio 2. I need to update the form dynamically depending on which ...

javascriptjqueryhtmlforms

My React setup is causing some problems that I need to address

React is not my strong suit, but I need to test a React application. The issue arises when attempting to run the server using gulp nodemon, resulting in numerous errors. It seems that the application is built on an outdated version of React and some libra ...

javascriptreactjsnpmgulpreact-bootstrap

In Typescript, it is not possible to assign the type 'any' to a string, but I am attempting to assign a value that is

I'm new to TypeScript and currently learning about how types function in this language. Additionally, I'm utilizing MaterialUI for this particular project. The issue I'm encountering involves attempting to assign an any value to a variable ...

javascripttypescripttypesmaterial-ui

Using ng-repeat in conjunction with ui-router conditions

Utilizing ui router ($routeprovider and $locationprovider) for angular js, I am looking to adjust the array being looped through in an ng-repeat based on the current url/route. Despite browsing similar threads on stack, I have not found a precise solution ...

javascriptangularjsurlangular-ui-routerangularjs-ng-repeat

How to achieve a seamless iframe effect using CSS

With the introduction of new HTML5 iframe attributes, there are now more options available. One such attribute is the seamless attribute, which has the ability to: Create an iframe that appears to be seamlessly integrated into the containing document. ...

javascriptjquerycssiframe

When an image is clicked, add the coordinates to a div

Is it possible to append the coordinates displayed when hovering over an image in a div using jQuery? You can see what I have so far in this fiddle: Fiddle Here is the jQuery code: $('.hover').mousemove(function(e){ var hovertext = ...

javascriptjqueryhtml

Activate only one option group at a time

<select name="location"> <optgroup label="West Coast"> <option value="1">Los Angeles</option> <option value="2">San Francisco</option> <option value="3">Seattle</option> &l ...

javascriptjquery

Steps for initializing input field with pre-existing values using Redux form

After reviewing the Redux Form documentation, I noticed that the example provided only fetches initial values upon button click. However, my requirement is to have these values available immediately when the page loads. In my current setup, I can successf ...

javascriptreactjsredux-form

Tips for limiting the .click function to only the initial image in order to prevent loading all images within the container

I am facing a situation where multiple images are being returned into a specific div, which is working as intended. <div class="go" id="container"></div> Upon clicking on an image, it is loaded into a modal popup. However, instead of capturin ...

javascriptjqueryhtml