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.