应用过滤器后元素被删除

Question

我正在应用过滤器以通过下拉列表获取特定字段的数据，但是当我 select 任何选项时，过滤器应用的元素都会被删除。我该如何解决？

HTML代码：

<body ng-controller="MyCtrl">
 <div>
  <label>Country filter</label>
  <input type="text" ng-model="countryFilter" />

  <label>Order by</label>
  <select ng-model="selectedOrder">
    <option ng-repeat="option in options">{{option}}</option>
  </select>
</div>

<ul>
  <li ng-repeat="detail in details | filter:{loc : selectedOrder}">{{ detail.country }}</li>    
</ul>
</body>

JS代码：

var app = angular.module('plunker', []);

app.controller('MyCtrl', function($scope) {

 // order by options
 $scope.options = ['1', '2', '3'];

 // all countries
 $scope.details = [{
  id:1, country:'Finland', address:'Mainstreet 2',detail:[{
  loc:'1'
}]
},{
id:2, country:'Mexico', address:'Some address',detail:[{
  loc:'2'
}]
},{
 id:3, country:'Canada', address:'Snowroad 45',detail:[{
  loc:'3'
 }]
}];
});

我想过滤 options 和 loc 值。我哪里错了？

Answer 1

filter:{prop:value} returns 第一层有属性 prop 的对象，它不看更深的对象。（当没有参数的普通过滤器执行时）

数组 details 中的对象没有 'loc' 属性。所以没有适合过滤器的东西。

您无法使用标准 angular 过滤器按对象的第二层和更深层次的精确属性进行过滤。实施您自己的或更改数据。

Answer 2

您不需要编写自定义过滤器。

将过滤器更改为：filter:{detail: {loc:selectedOrder}}

我在下拉列表中添加了 <option value=""></option> 并设置了 $scope.selectedOrder = ""; 以便默认显示所有国家/地区。

Codepen

应用过滤器后元素被删除

Element got removed after applying filter

html

javascript

angularjs

angularjs-filter