Javascript HTML select元素中对象数组的多个角度过滤器

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

或

或

我不知道哪个是正确的语法，或者这是否是正确的方法

我还尝试了相同的语法来过滤显示的数组：

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

或

等等

我得到的结果很奇怪。选择一个国家，然后过滤城市的ng repeat of选项，但ng repeat of type选项将始终为空。我觉得它可以在涉及两个过滤器而不是三个过滤器的情况下工作，但是如果我先选择一种类型，然后尝试另一种选择，那么就什么都没有了：/

这是尝试像这样过滤数组的正确方法，还是有人能解释一种更好的方法

如果我不希望所有选项在被选中时过滤数组，我应该给它们什么值

---

谢谢

这就是你能做到的

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

全部的
{{rec.country}
全部的
{{rec.city}
全部的
{{rec.type}

---

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

更新了我的答案。第一次尝试是错误的（很抱歉）。我还添加了一个工作示例。请添加空选项以重置SelectsHanks。它比我以前用的好多了。有一件事我仍然感到困惑：比如说我选择了爱尔兰这个国家，那么我对城市和类型的唯一选择就是“都柏林”和“食物”，正如我所期望的那样，但我没有选择这些。。如果我回去选择另一个国家，我看到的唯一选择就是爱尔兰和其他所有国家。如何停止按当前值筛选选择选项？我使用filter:selected筛选REC的结果ng repeat，就像select选项一样，并且我已将“All”选项的值设置为“”，如示例中所示。Mh发生这种情况是因为筛选器筛选与当前所选属性匹配的元素。因此，如果您选择一个国家，例如，那么您不能选择其他国家，直到您重置此字段。这是一种不良行为。很抱歉我将更新解决方案以忽略当前选择框的属性

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>

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