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>

我需要能够使用三个 Ionic 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>

注意：我已经使用 angular-filter 库中的唯一过滤器删除了选择选项的重复项。

我需要通过在其他两个选择选项中选择的内容来过滤每个选择选项，所以我尝试向每个选项添加这样的过滤器：

<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-repeat，但类型选项的 ng-repeat 将始终为空。我觉得当涉及两个过滤器而不是三个过滤器时它可以工作，但是如果我先选择一个类型然后尝试另一个选择，那里什么都没有：/

这是尝试像这样过滤数组的正确方法还是有人可以解释更好的方法？

如果我不希望它们在选择数组时过滤数组，我应该为 All 选项赋予什么值？

谢谢！

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

注意：我删除了独特的过滤器只是为了有一个最小的工作示例。