What is the best way to filter an object in AngularJS based on its properties?

I am faced with the issue of filtering two arrays of objects. Below is an example:

$scope.countries = [
        {'id' : 1, 'country_name':'India'},
        {'id' : 10, 'country_name':'Australia'},
        {'id' : 2, 'country_name':'England'}
    ];
$scope.states = [
        {'state_id' : 1, 'state_name':'Delhi', 'country_id':{'id':1 ,'country_name':'India'}},
        {'state_id' : 5, 'state_name':'London', 'country_id':{'id':2 ,'country_name':'England'}},
        {'state_id' : 2, 'state_name':'Victoria', 'country_id':{'id':10 ,'country_name':'Australia'}}
    ];

The challenge I'm facing involves filtering states based on the id within the country_id object as illustrated below:

<select ng-model="sellerCountry" ng-options="item.id as item.country_name for item in countries" required>
    <option value="">Select Country</option>
</select>   

<select ng-model="sellerState" ng-options="item.id as item.state_name for item in states | filter : {country_id: { id : sellerCountry}, }" ng-disabled="!sellerCountry">
    <option value="">Select State</option>
</select>

When I select India (where id = 1) from the first drop-down menu, I expect only Delhi to be displayed in the second dropdown. However, it also shows Victoria (with country_id.id = 10).

I would appreciate any assistance in resolving this. Thank you.

Answer №1

By default, filters perform a `contains` search. If you want the filter to do strict comparison instead, pass a third parameter of `true` to the filter function.

 ng-options="item.id as item.state_name for item in states
               | filter : {country_id: { id : sellerCountry} }: true"

Check out this Demo on Plunker

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

Converting database data into an array of objects using JavaScript

In my App.js file, I have the following code: const getPlayers = async()=>{ const players = await API.getPlayers(); setPlayers(players) } getPlayers() The following code is from my API.js file: const getPlayers = async() => { return getJson( ...

Loading background images in CSS before Nivo slider starts causing a problem

I've been struggling with preloading the background image of my wrapper before the nivo-slider slideshow loads. Despite it being just a fraction of a second delay, my client is quite particular about it -_- After attempting various jQuery and CSS tec ...

What is the best way to capture the input value upon pressing the "Enter" key?

My first question here is about implementing the addtodo(todo) code. After trying it out successfully, I wanted to make it work when typing and pressing enter. However, despite attempting some other methods, I couldn't get it to work. I didn't re ...

The ID value did not pick up the number 0 when passed to the next blade after the initial reading

When passing an ID value to another blade file, I encountered an issue where the other blade file did not read the number 0 at the beginning. For example, if I pass the value of 006, when I console log the value in the other blade view, it only shows 6. H ...

Collect the text shown in an alert message created with JavaScript

I'm currently unsure if this is achievable or not. In one of my scenarios, I aim to extract text that appears in alert boxes on external websites by including my JavaScript file. Is there a method to obtain the text content shown in an alert message ...

Challenges with implementing ng2-auto-complete in Angular2

I successfully integrated the Angular 2 ng2-auto-complete component into my project by following this helpful tutorial. The code is also available on GitHub. The current challenge I am encountering involves the formatting of my data source. It is structur ...

The hierarchy of precedence when using the TypeScript Type Assertion operator

Is it necessary to wrap the js-ternary operator with 'as' Type Assertion? ios ? TouchableOpacity : View as React.ElementType Will it automatically use the result of '?:' since it comes first? Or would a better implementation be: (ios ...

Disposing of memory in THREE JS when switching between routes in VUE

Currently, I am delving into the world of VUE JS and working on a basic SPA that navigates through different pages. In my spare time, I have developed several THREE JS demos which unfortunately tend to slow down and eventually halt when switching between ...

Unraveling AngularJS: Mastering the Art of Interpolating Interpol

Trying to interpolate a string retrieved from the database, such as "Users({{users_count || 0}})", poses a problem. Using {{}} or ng-bind for interpolation does not work properly. The HTML code written is {{data.usersCount}}, but instead of ren ...

Trouble with window.location functionality following an AJAX request

After a successful response from an AJAX request, the window.location method is not working as expected. However, when I debug step by step in Firefox, the window.location works fine. function login(){ var jason ={"usuario":document.getElementById("inp ...

What is the best way to integrate a Sequalize API into my React project?

I am looking for guidance on how to retrieve records from my MYSQL database and integrate it into my API. I am unsure about the routing process (do I need to create a component?) and struggling to find resources on using sequelize with React. Any assista ...

How can we redirect to another page after checking a box?

In the scenario where a checkbox is checked, how can the page be automatically redirected to @habit, simulating the behavior of clicking a submit button? habits/show <% if @habit.current_level_strike %> <div class="btn" id="red"> <l ...

Are there any distinctions between these two compact React components?

Let's compare these two components: function App1 () { return <button onClick={() => null}>Click me</button> } function App2 () { const fn = () => null; return <button onClick={fn}>Click me</button> } The on ...

Cannot trigger a click event on nginclude in AngularJS

I have a question regarding including a new page using the nginclude directive. The click event defined in the included page is not working properly. Main Application: <div ng-app=""> <input type="text" ng-model="ss"/> <div ...

Utilizing a Function Across Controllers in AngularJS: A Guide

When developing my angularjs application, I decided to create two separate modules - 'home' and 'templates'. I am now faced with the challenge of utilizing functions from one module in the other. Here's how I approached it: Modu ...

Discover the steps to retrieve a fresh array in PHP after utilizing sortable.js

Hi there! I am currently utilizing the sortable javascript feature found on Although the script is working perfectly fine for me, being a non-expert in javascript poses a challenge when it comes to generating the necessary code to retrieve an array in php ...

Establishing the primary language on a multi-language website

I am currently in the process of developing a website and I intend to offer support for both English and French languages. Up to this point, I've been following the primary solution outlined in this question: How to localize a simple HTML website pag ...

Retrieve a specific progress bar by its unique identifier and use AngularJS to dynamically update its value

How can I update the value of a specific progress bar in AngularJS based on its id? I am looking for a solution to this issue. Below are the progress bars that I have: <progressbar value="0" id="seekbar1"></progressbar> <progressbar value= ...

Vue.js: The Power of Manipulating Strings

Why is the filter method not working with this.userId, but it is working with the hard-coded value "admin"? How can I resolve this issue? computed: { UidMessages: function() { return this.Messages.filter(function(m) { return m ...

Three.js - Rotation does not follow local orientation accurately

In my current project, I have created an extensive array of objects centered around a focal point within a scene. My goal is to manipulate these objects along their local axes. Initially, I aligned all the objects to face the origin by using a reference ob ...