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/