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元素（每个属性一个）来过滤数组，其选项如下：

<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-repeat，但是类型选项的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

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

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

1 个答案: