I'm fairly new to working with JS and the rather challenging learning curve of AngularJS. I have an array containing numerous objects with the relevant properties listed below:
$scope.myRecs = [{country: 'Ireland', city: 'Dublin', type: 'Food'},
{country: 'Italy', city: 'Rome', type: 'Activity'},
{country: 'Australia', city: 'Sydney', type: 'Bar/Pub'}];
The goal is to display the array in the following format:
<div ng-repeat="rec in myRecs"></div>
The aim is to filter the array using three Ionic HTML select elements (one for each property) with options structured like this:
<select ng-model = "selectedCountry">
<option value="All"></option
<option ng-repeat="rec in myRecs | orderBy: 'country' | unique: 'country'">{{rec.country}}</option>
</select>
<select ng-model = "selectedCity">
<option value="All"></option>
<option ng-repeat="rec in myRecs | orderBy: 'city' | unique: 'city'">{{rec.city}}</option>
</select>
<select ng-model = "selectedType">
<option value="All">All</option>
<option ng-repeat="rec in myRecs | orderBy: 'type' | unique: 'type'">{{rec.type}}</option>
</select>
Note: Duplicates in the select options have been removed using the unique filter from the angular-filter library.
To filter each select option based on the choices made in the other two select options, various filtering methods have been attempted such as:
<select>
<option ng-repeat="rec in myRecs | orderBy: 'type' | unique: 'type' | filter: selectedCountry && selectedCity">{{rec.type}}</option>
</select>
And utilizing different syntaxes like:
filter: {city:selectedCity,country:selectedCountry}
or
filter: selectedCity || selectedCountry
or
filter: selectedCity | filter: selectedCountry
The correct syntax and approach remain unclear. Similarly, attempts have been made to filter the displayed array using syntaxes like:
<div ng-repeat="rec in myRecs | filter: selectedCountry && selectedCity && selectedType"></div>
or
<div ng-repeat="rec in myRecs | filter: selectedCountry || selectedCity || selectedType"></div>
etc...
The outcomes are puzzling. Selecting a country filters the city options but leaves the type options empty. It seems that while it may work with two filters, involving three leads to issues. Furthermore, if a type is chosen first, the subsequent selects return no results :/
Is this the right method for filtering the array or could there be a more efficient approach?
For the All options, what value should be assigned to prevent them from affecting the array when selected?
Thank you!