Question

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

HTML code：

<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:{detail: {loc:selectedOrder}}

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

Codepen

Answer 2

filter：{prop：value}返回在第一级具有属性prop的对象，它不会在对象中更深入地观察。（当没有params的常规过滤器时）

数组details中的对象没有＆＃39; loc＆＃39;属性。所以没有什么适合过滤器。

您无法使用标准角度滤镜按第2级和更深级别对象的精确属性进行过滤。实施自己的或更改数据。

应用过滤器后元素被删除

2 个答案: