我正在应用过滤器以通过下拉列表获取特定字段的数据,但是当我选择任何选项时,将删除应用过滤器的元素。我该如何解决?
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
值进行过滤。我要去哪里错了? 最佳答案
您无需编写自定义过滤器。
将您的过滤器更改为:filter:{detail: {loc:selectedOrder}}
我在下拉列表中添加了<option value=""></option>
并设置了$scope.selectedOrder = "";
以便默认显示所有国家。
Codepen