AngularJS过滤器通过选择空选项

Question

我想在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> 

这里是一个工作示例：

http://jsfiddle.net/9yk7a6v3/

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

我猜测问题是，空选项是一个空字符串，由于严格的选项，导致相等的错误，但是有没有办法让它在这个区间中正确行为？

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/