javascript - 应用过滤器后元素被删除

标签 javascript html angularjs angularjs-filter

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

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

关于javascript - 应用过滤器后元素被删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36000369/

相关文章:

ruby-on-rails - 由于重定向,设计 JSON API 返回 200 而不是 401

javascript - ng-route 读取链接并找到具有相同名称的特定 Controller

javascript - 在 for 循环中使用 Angular 的 $timeout 执行方法

javascript - Array.prototype.fill() 与 fill as I go 不同

javascript - 没有提及的命令

jquery - 设置一个元素使其周围环境淡化

html - 调整大小时折叠我的页面

javascript - 压缩 Sass 并使用 gulp 包含源映射?

html - 没有CSS位置属性的重叠父div

angularjs - 当所有值都等于零时,Nvd3 Multibarchart forceY 选项不起作用