javascript - HTML 选择元素中对象数组的多个 Angular 过滤器

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 过滤器库中的唯一过滤器删除了选择选项的重复项。

我需要根据在其他两个选择选项中选择的内容来过滤每个选择选项，因此我尝试为每个选择添加这样的过滤器:

<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

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