Using Angular JS, apply multiple column filters within a table to refine the displayed data

I'm currently working on implementing a filter for multiple columns in a table that is being populated by the ng-repeat directive.

<tr ng-repeat="descriptiveField in vm.descriptiveFieldList|filter:{name:vm.searchText}" ng-class-even="'even-bgcolor'">                                             
  <td ng-bind=descriptiveField.name></td>
  <td ng-bind="descriptiveField.fieldDescription></td>
  <td style="text-align: left" ng-bind=descriptiveField.source></td>
</tr>

There is a search box available:

<input type="text"  ng-model="vm.searchText" class="search-input"/>

Currently, the filter only applies to the 'Name' column. I would like to be able to search on two columns, 'name' and 'source'. How can I achieve this?

javascriptangularjsfilter

Answer №1

Utilize the $ symbol to easily filter various fields within your data:

<tr ng-repeat="descriptiveField in vm.descriptiveFieldList | filter:search:strict}" ng-class-even="'even-bgcolor'">
  <td ng-bind=descriptiveField.name></td>
  <td ng-bind="descriptiveField.fieldDescription></td>
  <td style="text-align: left" ng-bind=descriptiveField.source></td>
</tr>

<input type="text"  ng-model="search.$" class="search-input"/>

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

Is there a way to align the image next to the form and ensure they are both the same size?

I've been struggling to resize the image to match the form size, but I can't seem to get it right. Can anyone provide me with some guidance on this issue? I have obtained this contact form from a website that I plan to modify slightly, but I need ...

javascripthtmlcss

What is the most effective way to display a card with varying values depending on the user's input in a form?

For a while now, I've been grappling with a particular challenge. In my project, I am utilizing multiple states to display values within a card after they are entered into a form. The first state captures the values and modifies the initial state, whi ...

javascriptreactjs

Pausing a running function in React

Exploring Visual Sorting Algorithms In the process of creating a visual sorting algorithms tool for educational purposes, I have developed a function called sortArray() that handles the animation of the sorting process on arrays. The functionality is evid ...

javascriptnode.jsreactjsasynchronous

Having trouble with Postgres not establishing a connection with Heroku

My website is hosted on Heroku, but I keep encountering the same error message: 2018-05-06T19:28:52.212104+00:00 app[web.1]:AssertionError [ERR_ASSERTION]: false == true 2018-05-06T19:28:52.212106+00:00 app[web.1]:at Object.exports.connect (_tls_wrap.js:1 ...

javascriptnode.jserror-handlingnode-modulesheroku-postgres

Limit input to numbers only in Semantic UI React Form Field

I've developed a custom CurrencyInput React component for users to input numeric values. I set the input type to "number", but unfortunately, this only seems to function properly in Chrome (as Firefox still allows non-numeric entries). Here is the co ...

javascriptreactjstypescriptsemantic-ui-react

Using Vuex and array.findIndex but unable to locate a matching element

I am encountering an issue with the array.findIndex method. Despite being certain that there is a match in the array I am searching through, findIndex consistently returns -1. let index = state.bag.findIndex((it) => { it.id === item.id console. ...

javascriptarraysvue.jsvuex

Issue with binding classes dynamically in vue with svg elements

I'm attempting to create a custom typing program for one of my students using SVG to display the words and class binding with Vue.js. The goal is to change the color of the characters when the correct key is pressed by the user. However, I've enc ...

javascriptvue.jssvg

The object NativeModules from the 'react-native' requirement is currently empty

At the top of one of the node_modules utilized in my project, there is a line that reads: let RNRandomBytes = require('react-native').NativeModules.RNRandomBytes However, I've noticed that require('react-native').NativeModules ...

javascriptreact-nativenpmimport

A guide on accessing information from nested arrays in JavaScript

I am having trouble retrieving data from a JavaScript array as it keeps showing undefined. Here is the code snippet: sabhaDetailsArrayTemp.forEach(element => { let arra = []; console.log(element) //return tmp.m_category_name ; arra = this.onSa ...

javascriptarraysjsonangular

Having difficulty accessing certain code in TypeScript TS

Struggling with a TypeScript if else code that is causing errors when trying to access it. The specific error message being displayed is: "Cannot read properties of undefined (reading 'setNewsProvider')" Code Snippet if (this.newsShow != ...

javascriptc#jquerytypescript

What is the best way to choose a specific sentence within a text using a protractor tool?

I need to interact with a rich text editor using Protractor. My goal is to choose a specific sentence from the text and then click on the bold button to make that sentence stand out. My attempts to select all the text have been unsuccessful so far. I am w ...

angularjsseleniumprotractorsendkeys

Combining Tailwind with Color Schemes for Stylish Text and Text Shadow Effects

tl;dr I have a utility class in my tailwind.config.ts for customizing text shadows' dimensions and colors. However, when using Tailwind Merge, I face conflicts between text-shadow-{size/color} and text-{color}. The Issue In CSS, text shadows are oft ...

javascriptcssreactjsnext.jstailwind-css

Leveraging the useRef hook to adjust the CSS styling of a React component

Currently, I am working on changing the style of a react component by utilizing the useRef hook. So far, I have implemented the useRef hook to reference the specific component whose style I want to modify when clicking on two buttons. Despite my efforts, I ...

javascriptreactjsreact-hooks

Issue: Module '../utils/composeObjs' not found after global installation of generator-stencil

Currently, I am in the process of developing a generator for stenciljs which can be found at https://github.com/AkashGutha/generator-stencil Within this project, there is a handy utility function located at the root directory. This function resides in one ...

javascriptnode.jsyeomanyeoman-generatorstenciljs

window.print function appears multiple times

Looking for help with a sample script I have that prints a section of my website page when a button is clicked. The issue arises when using ajax to transition and clicking the same button results in window.print activating multiple times. How can I ensur ...

javascriptjquery

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

Looking to modify the background-color of two css selectors, .pane and .view, that are located within the ionic.css file. Despite multiple attempts to do so using JavaScript directly in the index.html file, the changes are not reflected. The code snippet ...

javascripthtmlcssangularionic-framework

Eliminating documents subsequent to file upload

I need to send in my application and upload the necessary file for the submission. However, I can only upload the files after the application is successfully submitted. To achieve this, I have included the upload function within the success callback of the ...

angularjscordova

What causes the appearance of a nested URL like '/auth/auth/ ' when the original URL does not exist?

While following a tutorial, I encountered an issue where if the URL is not included in the routes.ts file, it redirects to a nested /auth/auth/...../login/ instead of redirecting to localhost:3000/auth/login middleware.ts import authConfig from "./au ...

javascriptreactjsnext.jsnext-auth

Issue in IE with click event not firing from parent page

Currently, I am facing an issue with a filter on one of my website's pages that is designed to display various products. My goal is to set it up so that when a button from an external page is clicked, the user will be redirected to the product page wh ...

javascriptjquery

Material UI Snackbar background color not able to be changed

Currently, I'm working on an ErrorHandler component in React.JS that displays a Material UI Snackbar whenever it catches an error. The issue I'm facing is trying to change the background color of the Snackbar to red, which seems to be problematic ...

javascriptreactjsmaterial-ui