Множественные угловые фильтры массива объектов в элементах выбора HTML

Question

Я довольно новичок в JS и крутой кривой обучения AngularJS. У меня есть массив многих объектов со следующими (соответствующими) свойствами:

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

мне нужно отобразить массив следующим образом:

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

мне нужно, чтобы иметь возможность фильтровать массив, используя три ионные HTML выберите элементы (по одному для каждого свойства) с опциями, как так:

<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> 

Примечание: я удалил дубликаты для выбора опций, используя уникальный фил тер от библиотеки угловых фильтров.

мне нужно фильтровать каждый выберите опцию, что было выбрано в двух других выбранных опций, так что я попытался добавить фильтры, как это каждый из них:

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

и с различными типами синтаксисом так:

filter: {city:selectedCity,country:selectedCountry} 

или

filter: selectedCity || selectedCountry 

или

filter: selectedCity | filter: selectedCountry 

Я не могу понять, что является правильным синтаксисом или если это правильный подход.

Я также пробовал те же синтаксисом для фильтрации массива, который отображается:

<div ng-repeat="rec in myRecs | filter: selectedCountry && selectedCity && selectedType"></div> 

или

<div ng-repeat="rec in myRecs | filter: selectedCountry || selectedCity || selectedType"></div> 

и т.д ...

Результаты я получаю странные. Выбор страны затем фильтрует ng-повторение параметров для городов, но затем ng-repeat параметров типа всегда будет пустым. Я чувствую, что он может работать, когда есть два задействованных фильтра, но не три, однако, если я сначала выберу тип, а затем попробую другой выбор, там ничего нет:/

Правильно ли вы пытаетесь фильтровать массив вроде этого или может кто-то объяснить лучший подход?

Какое значение следует указывать для опций Все, если я не хочу, чтобы они отфильтровывали массив, когда они были выбраны?

Спасибо!

Answer 1

Это, как вы можете сделать это

<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

Примечание: Я снял уникальный фильтр просто иметь минимальный рабочий пример.