我正在应用过滤器通过下拉列表获取特定字段的数据,但是当我选择任何选项时,过滤器应用的元素将被删除。我该如何解决?
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 = "";
以便默认显示所有国家/地区。
关于javascript - 应用过滤器后元素被删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36000369/