Filtering out specific properties in an array using Angular

I am facing an issue with my Angular filter when inputting text for a specific list.

initialViewModel.users = [
{user: 'Nithin',phone: 'Azus', price: 13000}, 
{user: 'Saritha',phone: 'MotoG1',price: 12000}, 
{user: 'Renjith',phone: 'MotoG2',price: 14000}, 
{user: 'Felix',phone: 'Nexus',price: 21000}];

The filter is giving incorrect results for the text values a,g,m,n,o,s,u,z.

You can view a sample fiddle here.

        <ul>
            <li ng-repeat="user in Model.users | filter: Model.name | orderBy:'price'">{{user.user + ' bought phone worth ' + user.price}}</li>
        </ul>

For example, when filtering with 'a', it should only return the record where the name is Saritha. However, it is showing two records instead of one.

Answer №1

By default, Angular filters by any property of an object. If you want to specifically filter by a certain property, you will need to adjust your filter accordingly:

<li ng-repeat="user in Model.users | filter: { user: Model.name } | orderBy:'price'">
    {{user.user + ' purchased phone worth ' + user.price}}
</li>

Take note of this section: filter: { user: Model.name }. This code tells Angular to only filter based on the property user of your object.

Check out the revised JSFiddle

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

How can I change a PHP for loop to Javascript?

Can the following code be converted to JavaScript? for (let lift of liftDetails) { document.write('<option>'+ lift["LiftMakes"] +'</option>'); } ...

Using JavaScript to locate a child element within its parent

What is the most effective approach to locate a child element (using class or ID) of a specific parent element using only pure JavaScript without relying on jQuery or other frameworks? In this scenario, I am interested in finding child1 or child2 within p ...

Authentication with AngularJS and Java, managing $scope

My current system setup includes: front-end = AngularJS back-end = Java EE7/REST-API Both applications are operating on Wildfly 8.2 using Undertow as the application server. One of my main concerns is about the authentication process: Should I impl ...

The app constantly requests permission for geolocation services

While experimenting with the geolocation API, I encountered an issue where my page kept repeatedly asking for permission upon refresh. To work around this problem, I attempted to save my coordinate data to local storage but encountered difficulties in ma ...

Using JavaScript regular expressions to validate currency without relying on jQuery

Looking for a solution to create a money mask for an input field without using jquery in my application. Is it possible to achieve this using regular expressions with 'on key up' events, for example? Below is the code snippet: <tr> & ...

"Utilize JavaScript to detect both the loading and unloading events on a webpage

I attempted to capture the window.open onload and onunload events. The issue arises when I use URLs from other domains. For example: When the URL is for the same page, both events trigger as desired. window.open("/") View PLUNKER with same page URL .. ...

Can regular expressions be employed to match URLs with $urlRouterProvider in AngularJS?

My goal is to create a regex expression that matches all strings in my routing config which do not start with "/pt/" or "/en/". Additional text may be present in these strings. This is what I have so far: $urlRouterProvider.when('^(?!/(pt|en)/).*&ap ...

Error: The JQUERY autocomplete is throwing an uncaught type error because it cannot read the property 'length' of an undefined value

These scripts are being utilized at this source I have implemented jQuery Autocomplete to search for users in my database. Below is the controller code returning Json: public function searchusers1() { if ($_GET) { $query = $this -> input ...

How can we eliminate all elements from jQuery except for the first and second elements?

HTML <div class="geo_select"> <h3>header 3</h3> in Above HTML code i want to remove all element except <h3> and default content<div> inside the <div class='geo_select'> in jquery.. How to remove all ...

Exploring the potential of utilizing the "wait" function in Selenium WebDriver for

I want to automate a test on my website using the Selenium WebDriver for JavaScript. How can I approach running tests here with content that may not be ready when the page loads, such as data coming from an external API? In my case, the content is loaded ...

Discover the power of AngularJS dashboard templates

What is the best way to utilize free AngularJS Dashboard Templates that are available online? I have come across a variety of free angular dashboard templates. While they seem appealing, I am struggling to find detailed instructions on how to implement t ...

An Easier Way to Incorporate an Image Insert Button into CKEditor

Having trouble displaying the Insert Image button in CKEditor 4.1.1? Here's my current configuration setup in config.js: CKEDITOR.editorConfig = function( config ) { // Customizing default configuration here. // For more details, check: http: ...

Istanbul provides me with a thorough analysis, yet it always seems to conclude with an error

Currently, I am experimenting with a basic application (found in the Mocha tutorial code available at ) to troubleshoot why Istanbul is giving me trouble. The issue is that Istanbul successfully generates a coverage summary but then throws an error for unk ...

Angular unable to send object to HTML page

Struggling with learning angular, encountering new challenges when working with objects in different components. In two separate instances, try to implement two different mechanisms (microservice or service component serving an object directly). This speci ...

Why does the loginStatus in Redux become undefined when the component is initially rendered?

Currently diving into Redux and encountering a problem that is new to me as I usually work with React without redux. The issue arises when I attempt to showcase a portion of my state within a component named loginStatus. Despite setting up the state in the ...

Converting files to .RAR format using Node.js

Within my current project, I am managing a table of projects. Each project has its own designated column for downloading a PDF file. My goal is to provide users with the capability to download all files and compile them into a single .rar file. Below is th ...

A Guide to Filtering MongoDB Data Using Array Values

I am trying to extract specific data from a document in my collection that contains values stored in an array. { "name": "ABC", "details": [ {"color": "red", "price": 20000}, {" ...

What could be causing my Node.js website to have trouble locating pages in the public directory?

Embarking on my journey in web development using node.js, I encountered an issue while trying to load a particular page, which led to the following error message in my browser: Cannot GET /public/pages/terms-and-conditions.html The file structure is orga ...

Angular code isn't functioning properly

I recently started coding in Angular.js using WebStorm: <!DOCTYPE html> <html ng-app="store"> <head lang="en"> <meta charset="UTF-8> <title></title> </head> <body ng-app="store"> <script src="bowe ...

What components and substances are needed for a particle system in Three.js?

After spending a few weeks working with particle systems in Three.js, I initially used an Object3D, incorporating my own Vector3s and various materials like MeshBasicMaterials, Phong, and Lambert. However, after discovering the built-in ParticleSystem obje ...