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

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'
 }]
}];
});


我想通过optionsloc值进行过滤。我要去哪里错了?

最佳答案

您无需编写自定义过滤器。

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

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

Codepen

07-25 23:09
查看更多