应用过滤器后元素被删除

Element got removed after applying filter

本文关键字：删除 元素 过滤器 应用      更新时间：2023-09-26

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

网页代码：

<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 = "";，以便默认显示所有国家/地区。

代码笔

filter：{prop：value} 返回在第一级具有属性prop的对象，它不会在更深层次的对象中监视。（当通常没有参数的过滤器这样做时）

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

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

相关文章：