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

PHP does not receive the uploaded image

I have encountered an issue while trying to create a form for editing a product. Whenever I upload an image, my PHP code is unable to locate the image and throws the following error: Notice: Undefined index: image in C:\xampp\htdocs\pages&bs ...

javascriptphpbootstrap-4

How to capture and log request and response data when using the HttpService in NestJS?

Is there a way to log requests, responses, and errors using the HttpService within the HttpModule? In the past, I have used Interceptors with AXIOS. While HttpService wraps axios, I'm having trouble adding interceptors. There doesn't seem to be ...

javascriptnode.jstypescriptaxiosnestjs

Loading a chunked polyfill file in webpack only when needed - a step-by-step guide

In order to prevent unnecessary loading of polyfills, it is recommended to add some logic in the <head> section (https://webpack.js.org/guides/shimming/) <script> var modernBrowser = ( 'fetch' in window && ...

javascriptwebpackvue.jspolyfills

Explore the flexibility of npm by installing and utilizing various versions of a specific package

Is it possible to install and utilize different versions of packages in npm? Installation can be done as follows: npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d6d7c7e767c7a78737c70785d2f3325">[email p ...

javascriptnode.jsnpminstallation

When attempting to capture an element screenshot as PNG, a TypeError occurs indicating that the 'bytes' object is not callable

Can someone please help me figure out how to save a screenshot of a specific element in Selenium using Python3? Here is the code I am trying: from selenium import webdriver import pyautogui as pog import time options = webdriver.ChromeOptions() options ...

javascriptpythonhtmlseleniumtypeerror

Exploring the world of AngularJS for the first time

I'm currently delving into the world of AngularJS and I encountered an issue with my first example. Why is it not working as expected? Here's a look at the HTML snippet: <html ng-app> <head> <title></title> <sc ...

javascriptangularjs

Updating text color with Ajax response value

I need assistance with updating the text color of a sensor value displayed using html/ajax. Currently, the sensor value is being displayed successfully, but I want the text color to change based on the value. Here's an example: if value < 50 then f ...

javascripthtmlcssajaxtextcolor

What's the best way to ensure an endless supply of copied elements with identical classes to the clipboard?

Here is a snippet of my HTML code: <Div Class='POSTS'> <Div Class='POST'> <Div Class='CONTENT'>Text1</Div> </Div> <Div Class='POST'> <Div Class=&apos ...

javascripthtmljquerycopyclipboard

In what way does s% access the title attribute within the Helmet component?

I am seeking clarification on how the reference to %s is connected to the title attribute of the <SEO /> component within the <Helmet /> component in the gatsby starter theme. Can you explain this? Link to GitHub repo On Line 19 of the code: ...

javascriptreactjsjsxgatsby

Building an array of objects using a foreach loop

i am struggling to create an array of objects from two input groups, each group consists of 3 inputs with data-side attributes set to left or right every input has a class named "elm" and a data-pos attribute set to a, b, or c <input class="elm-left elm ...

javascriptjqueryarraysobject

Passing data from an API in Vue.js to a different page

I'm a beginner with Vue Js and I'm looking for guidance on how to send data between two components. Currently, I am working on a Vue app that fetches a list of users from an API and displays them. My goal is to transfer data between these compone ...

javascriptvue.jsvue-componentvue-routervuejs3

Improve Email Regular Expression to Restrict Consecutive Periods

I'm not very good with regular expressions, so I decided to seek some help. Here's the regular expression I have: /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.) ...

javascriptregexvalidation

Executing the ES6 import syntax within a Node child process

After many attempts, I have come to the conclusion that I am ready to throw in the towel. My goal was to run a node es6 project that employs es6 import syntax; however, it seems that the child processes are not cooperating. The issue stems from the fact th ...

javascriptnode.jsecmascript-6babeljschild-process

What could be causing the malfunction in my nested ng-repeat implementation?

It appears that my ng-repeat is not functioning as expected, here is my code snippet: <div ng-controller="DeliveryController"> <div ng-repeat="stop in Deliveries"> <div > {{stop.stopId}} </div> ...

angularjsarraysjsonangularjs-ng-repeat

What is the best method to toggle between inline div elements in AngularJS? Should I use ng-switch, ng-hide, or ng-show?

I am looking for a way to change the orientation of a div based on a specific event trigger. This could be done using onclick, ng-switch, ng-show, or ng-hide. I would appreciate it if someone could demonstrate a working example without utilizing ng-include ...

angularjsangularjs-directive

The prop HandleClick is not being identified

Whenever I click on the sidebar, my menu should appear, but instead I'm encountering an error message saying "react-dom.development.js:86 Warning: React does not recognize the handleClick prop on a DOM." import { useState } from "react"; imp ...

javascriptreactjsreact-nativereact-hooks

Utilizing AJAX, a PHP script creates an HTML table that allows users to easily perform actions such as deleting, updating

I'm a beginner in the world of ajax and I am eager to utilize it with php in order to develop a table that can be edited by users directly on the webapp interface. Here's my current progress... PHP class genTable{ public function table1(){ ...

javascriptphpjquerymysqlajax

Maintaining focus on UI grid cellTemplate editableCellTemplate is not a problem

Currently, I am utilizing angular-ui-grid and attempting to display a mix of various cell templates. Specifically, I want certain grid cells to change their class/color based on the entity's property. Additionally, some cells should display a button t ...

angularjsangular-ui-grid

Issue: Encounter of an unexpected token (Please ensure that plugins are installed to import files that are not JavaScript) while using the rollup vue package

I am working on creating a Vue component library, but I encountered an error with my type checking. I attempted to update TypeScript as mentioned here, but it did not resolve the issue. Here is a snippet of my code and `package.json` file. My component cod ...

javascriptvue.jsrollup

What are some strategies for safeguarding a disabled button?

Is there a way to securely disable a button if the user does not have permission to access it? I currently disable it at the Page_Load event: Page_Load() { if(!userhasrights) { btn.Enabled=false; } } However, after rendering, ASP.N ...

javascriptasp.net