[英]AngularJS filter by select with empty options
我正在尝试为AngularJS中的表构建过滤系统。
我有一个与系统捆绑在一起的产品清单。 我希望能够在一个选择中列出所有系统,并按选定的系统筛选产品。
除了选择空的select选项(该选项可以过滤掉所有系统)之外,这非常有用。
这是我的示例代码:
控制器:
function Controller($scope) {
$scope.products = [
{id: 1, system_id: 1, name: 'Product 1'},
{id: 2, system_id: 1, name: 'Product 2'},
{id: 3, system_id: 2, name: 'Product 3'}
];
$scope.systems = [
{id: 1, name: 'System 1'},
{id: 2, name: 'System 2'},
{id: 3, name: 'System 3'}
];
}
和HTML:
<div ng-app ng-controller="Controller">
System: <select ng-model="filter.system_id" ng-options="system.id as system.name for system in systems">
<option value="">All Systems</option>
</select>
<ul>
<li ng-repeat="product in products | filter: filter : true">
{{ product.name }}
</li>
</ul>
</div>
这是一个工作示例:
我的最终目标是拥有多个过滤器,其中filter是过滤对象,每个属性都绑定到一个单独的select上。
我猜测问题是空选项是一个空字符串,由于使用严格选项而导致相等性错误,但是有没有办法使它在这种情况下正确运行?
var app = angular.module('myApp',['myFilters']);
angular.module('myFilters', []).
filter('customFilter', function () {
return function (products,filter) {
var results = [];
console.log(filter);
if(!filter.system_id) {
return products;
}
angular.forEach(products, function(product) {
if(product.system_id === filter.system_id) {
results.push(product);
}
});
return results;
};
});
<li ng-repeat="product in products | customFilter: filter">
{{ product.name }}
</li>
</ul>
我们可以使用自定义过滤器来完成此操作
实际行动
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.