javascript - AngularJS 通过选择空选项进行过滤

Question

我正在尝试为 AngularJS 中的表构建一个过滤系统。

我有一个产品列表，每个产品都与一个系统绑定(bind)。我希望能够在选择中列出所有系统，并按所选系统过滤产品。

除了选择空选择选项(该选项会过滤掉所有系统)之外，这非常有效。

这是我的示例代码:

Controller :

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>

这是一个工作示例:

http://jsfiddle.net/9yk7a6v3/

我的最终目标是拥有多个过滤器，其中过滤器是过滤对象，每个属性都绑定(bind)到一个单独的选择。

我猜测问题在于空选项是一个空字符串，由于严格选项而导致相等性错误，但是有没有办法让它在这种情况下正确运行？

Answer 1

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>

我们可以使用自定义过滤器来完成此任务

查看实际操作

http://jsfiddle.net/xujihui1985/9yk7a6v3/2/