Utilizing various AngularJS filters with multiple input sources

Looking to enhance my user array filtering process with two input boxes.

Here's how the array is structured:

    $scope.users = [{
    id: 1,
    fname: 'Sophia',
    lname: 'Smith',
    email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21524e51494840614c4...">[email protected]</a>'
}...

The input boxes I'm using are nameSearch and emailSearch. The goal is to search for fname and lname properties with nameSearch, while simultaneously applying emailSearch to the email property.

When using a simple filter like | filter: nameSearch, it searches the entire array object. I specifically want it to only search using fname, lname, and email.

After reading the documentation, I attempted something like this:

<li ng-repeat="user in users | filter:{fname: nameSearch, lname: nameSearch, email: emailSearch}">{{user.fname + ' ' + user.lname}}</li>

However, it doesn't seem to work as expected.

Do I need to create a custom filter for this functionality?

Check out the fiddle here.

Answer №1

When utilizing all filters, the result is a combination of all search criteria.

To perform a basic search, you can do the following:

<li ng-repeat="user in users | filter: nameSearch ">{{user.fname + ' ' + user.lname}}</li>

This will display any results matching your search query.

If you require more specific filtering based on certain fields, creating a function using OR logic is recommended.

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

Mysterious occurrences always seem to unfold whenever I implement passport for user authentication in my Node.js and Express applications

At first, I wrote the following code snippet to define LocalStrategy: passport.use( 'local-login', new LocalStrategy({ usernameField:'username', passwordField: 'password', passReqtoCallback: tr ...

Error encountered in React Native packager due to naming conflict between "lodash" and "yeoman-generator" libraries

Issue Description Within my current project, I am utilizing "react-native": "0.36.0" along with the following dependencies: "lodash": "^4.15.0" "yeoman-generator": "^0.24.1" Upon using versions above "^3.10.1" for "lodash" and "0.21.2" for "yeoman-gene ...

What is the reason for the value of an object's key becoming undefined when it is set within a loop?

I've always wondered why setting a certain object's key as its own value in a loop results in undefined. Take this code block, for example: var text = 'this is my example text', obj = {}, words = text.split(' '); for (i = ...

Guide to setting up a backend system using AJAX, PHP, and MySQL to handle dynamic video sources in conjunction with Google TV Templates

If you're looking to develop web apps for Google TV, particularly those involving video content, the simplest method is to utilize Google TV Templates: https://developers.google.com/tv/web/docs/gtv-templates. The original Google TV Templates included ...

Retrieve an array containing various values of a single element with the help of Protractor

Currently, I am in the process of testing an application that showcases graphs using rickshaw and d3. The tests are being run with protractor and jasmine. It's worth noting that this question is not specific to this particular scenario but rather more ...

Unsynchronized state of affairs in the context of Angular navigation

Within my Angular project, I am currently relying on an asynchronous function called foo(): Promise<boolean>. Depending on the result of this function, I need to decide whether to display component Foo or Bar. Considering my specific need, what woul ...

Exploring the power of AngularJS directives in combination with ng-click

When working with a controller function, I have encountered an issue while calling a REST API that returns an array. To display this data in a HTML table, I am using ng-repeat along with a custom directive like so: <player id="transaction.id_player_to" ...

What is the best way to include a new property to an existing interface and then export the updated interface in Typescript?

Can you provide guidance on creating a new interface - UIInterface that combines SummaryInterface with additional properties? For example: import { SummaryInterface } from 'x-api'; // summaryInterface includes 20+ predefined properties generated ...

Shortcuts for $scope variables in AngularJS templates

Within my controller, I often set: $scope.currentThing.data For different parts of my template, sometimes I require currentThing.data.response[0].hello and other times currentThing.data.otherStuff[0].goodbye //or currentThing.data.anotherThing[0].goo ...

Unable to send POST request (including data) using event trigger from an external component

I'm currently facing an issue where a click event in one component is triggering a method in another, but the data that should be passed in my POST request isn't being sent. Interestingly, when I test the functionality by calling the method dire ...

The code is throwing an error because it is unable to find the property 'vibrate' of an

I am currently trying to implement the ng-cordova vibrate plugin in my ionic application, but I am facing an issue. The console log is showing an error message: Cannot read property 'vibrate' of undefined. Can someone please provide guidance on h ...

How does the keyof operator fetch non-enumerable inherited properties from an object literal type?

Take a look at this TypeScript code: 'use strict'; type Value = 1 | 2 ; type Owner = 'ownerA' | 'ownerB'; type ItemType = 'itemTypeA' | 'itemTypeB'; type Item = { type: ItemType; owner: Owner; value: ...

What are the steps to implementing partial page functionality with the $http service in Angular?

Could someone assist me with executing an operation once a partial page has been successfully loaded using the $http service in Angular? The operation involves checking a checkbox based on the scope value. I have included the source code below: Here i ...

Tips for targeting an element for focus following a re-render in ReactJS

Within my web application, when a user hits the enter key, they are able to save the current record. A message confirming that the "record has been successfully saved" is then displayed. However, I have noticed that the blinking cursor in one of the input ...

Ways to expand the capabilities of Google Analytics for tracking AJAX requests and more, as recommended by the H5BP documentation

I need assistance with installing the Google Analytics enhancements mentioned in the extend.md file of H5BP (https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/extend.md). The documentation mentions using a specific code snippet for optimized Googl ...

Having difficulty applying parseFloat directly following a JSON Stringify operation

There's a specific line of code I'm working with that reads -- let longitude = JSON.stringify(place.lon); After calling alert(longitude), I receive the output "44.54321". However, my intention is to retrieve just the number itself, so I attempt ...

Function compilation did not succeed in the module

I've put together a MERN (MongoDB, ExpressJS, React, Node) project using express-generator (express myNewApp). Within a react component, I have implemented this ES6 code snippet: onChange = (event, { newValue }) => { // Line 53 this.setSt ...

iOS devices experiencing issues with fixed positioning

Currently, I am in the process of implementing a few instances of , but I am encountering some issues with the CSS. When viewing the website on an iPad or iPhone, the calendar is positioned correctly as the container covers the window like a fixed position ...

Creating an array of objects by parsing JSON using the jQuery .each() method

I am attempting to generate an array of objects by parsing a JSON file. Here is the pertinent code: //president object constructor function president(a_presName, a_presDates, a_presNick, a_presImage) { this.presName=a_presName; this.presDates=a_pr ...

Looking to add a form within another form using AJAX? Just keep in mind that the initial form should also be inserted using AJAX

I have incorporated a form using AJAX on a Php page. Now, I am trying to add another form within that existing form which is also created using AJAX, but unfortunately, it is not functioning as expected. This serves as the parent page. <div class=" ...