CODEWITHSUNDEEP
javascriptarraysangularjsfilterionic-framework
user4526265
user4526265

Reputation:

Multiple Angular filters of array of objects in HTML select elements

I'm quite new to JS and the steep learning curve that is AngularJS. I have an array of many objects with the following (relevant) properties:

  $scope.myRecs = [{country: 'Ireland', city: 'Dublin', type: 'Food'},
                {country: 'Italy', city: 'Rome', type: 'Activity'}, 
                {country: 'Australia', city: 'Sydney', type: 'Bar/Pub'}];

I need to display the array as follows:

<div ng-repeat="rec in myRecs"></div>

I need to be able to filter the array using three Ionic HTML select elements (one for each property) with the options like so:

<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: I have removed duplicates for the select options using the unique filter from the angular-filter library.

I need to filter each select option by what has been chosen in the other two select options so I have tried adding filters like this to each one:

<select>
    <option ng-repeat="rec in myRecs | orderBy: 'type' | unique: 'type' | filter: selectedCountry && selectedCity">{{rec.type}}</option>
</select>

And with different types of syntax like so:

filter: {city:selectedCity,country:selectedCountry}

or

filter: selectedCity || selectedCountry

or

filter: selectedCity | filter: selectedCountry

I cannot figure out which is the correct syntax or if this is the correct approach.

I have also tried the same syntaxes for filtering the array that is displayed:

<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 results I am getting are strange. Choosing a country then filters the ng-repeat of options for the cities but then the ng-repeat of type options will always be empty. I feel like it can work when there are two filters involved but not three, however if I choose a type first and then try another of the selects, there is nothing there :/

Is this the correct way to try to filter the array like this or can someone explain a better approach?

What value should I give the All options if I do not want them to filter the array when they are selected?

Thanks!

Upvotes: 2

Views: 2880

Answers (1)

Yannic B&#252;rgmann
Yannic B&#252;rgmann

Reputation: 6581

This is how you can do it

<select ng-model="selected.country">
    <option value="">All</option>
    <option ng-repeat="rec in myRecs | filter: {city: selected.city, type: selected.type}">{{rec.country}}</option>
</select>
<select ng-model = "selected.city"> 
    <option value="">All</option>
    <option ng-repeat="rec in myRecs | filter: {country: selected.country, type: selected.type} ">{{rec.city}}</option>
</select>
<select ng-model = "selected.type"> 
    <option value="">All</option>
    <option ng-repeat="rec in myRecs | filter: {country: selected.country, city: selected.city}">{{rec.type}}</option>
</select>

Working jsFiddle

Note: I removed the unique filter just to have a minimal working example.

Upvotes: 1

Related Questions