從選擇/取消選擇複選框組合中過濾ng-repeat列表項目

Question

我有一個基於價格屬性更改而經常更新的項目列表。如果物品的價格低於特定值（低於5），則該物品的「selected」屬性設置爲true，並顯示在結果表中（在所選屬性上進行過濾）。

ng-repeat="item in dataPrices | filter: {selected:true}" 

我要添加了一系列複選框，其基於使用應進一步篩選結果的複選框的組合的選擇/取消選擇的 - 零至三個選項都是可能的

<label ng-click="productType('large')"> 
     <input type="checkbox"> 
     <span>Large items</span> 
</label> 
<label ng-click="productType('small')"> 
     <input type="checkbox"> 
     <span>Small items</span> 
</label> 
<label ng-click="productType('medium')"> 
     <input type="checkbox"> 
     <span>Medium items</span> 
</label> 

我曾嘗試額外的過濾器添加到NG-重複

ng-repeat="item in dataPrices | filter: {selected:true} | filter: {size:'large'}" 

其工作原理，但我不知道如何根據CHEC的組合的結果，加上它們的組合kbox選擇/取消選擇。任何幫助將不勝感激。

我已經把這個plunkr在一起這可能使這一點更清楚 - 因爲以前的過濾器的結果應用於每一個過濾器https://plnkr.co/edit/DHsOcWbfld7V7V1G8nIF?p=preview

Answer 1

如果你使用了很多額外的過濾器，它ins't工作， 。 所以，當你這樣做時，如果你選擇'大'和'小'：{尺寸：'大'}，結果不包含'小'來應用另一個過濾器。

我認爲你可以通過兩種方式做到這一點。

1 - 你可以返回一個功能，您的NG-重複，返回過濾列表：

ng-repeat="item in filtered()" 

在你的控制器：

$scope.filtered = function() { 
    //take the selected filter and your data and apply the filters 
    //return the filtered list 
    // you can code this with lodash 
    // $scope.data -> your data 
    // $scope.productType -> can be one or multiple 
    var filtered = _.filter($scope.data, function(item) { 
     //Note that this filter is just an example, this implementation depends on what you really need and how your filter selection works. 
     return item.selected && item.size === $scope.productType; 
    }); 
    return filtered; 
} 

在這種情況下，你需要編寫自己的過濾並應用於列表。像lodash這樣的圖書館應該會幫助你很多。

你可以在NG-重複過應用其他過濾器：

ng-repeat="item in filtered() | anotherFilter" 

2 - 你可以手動控制過濾器流。這有點複雜，因爲您需要確切瞭解您的視圖應該如何工作以及何時需要更新視圖。這種方法可以提高性能。

基本上你會用另一份清單收到您的過濾後的數據：

ng-repeat="item in filteredList" 

而當你需要調用一個函數（手動）更新此名單。所以

$scope.filteredList = getFilteredData(); 
function getFilteredData() { 
    return _.filter($scope.data, function(item) { 
     return item.selected && item.size === $scope.productType; 
    }); 
} 

注意，在這種方法中，你需要要更新您的視圖，每次打電話$scope.filteredList = getFilteredData();。所以每次你選擇一個新的尺寸過濾器或類似的東西，你需要執行代碼。

Answer 2

你應該申請後定製oRfilter內置filter : {selected: true}：

angular.module('app', []) 
 
.controller('ctrl', ['$scope', function($scope) { 
 
    $scope.items = [ 
 
     {selected: true, size: 'large'}, 
 
     {selected: false, size: 'large'}, 
 
     {selected: false, size: 'medium'}, 
 
     {selected: true, size: 'medium'}, 
 
     {selected: true, size: 'small'} 
 
    ]; 
 
    $scope.search = {}; 
 
}]) 
 
.filter('oRfilter', function(){ 
 
    return function(items, search){ 
 
    var out = [];  
 
    var atLeastOne = false; 
 
    for(var prop in search) 
 
     if(search[prop]){ 
 
     atLeastOne = true; 
 
     out = out.concat(items.filter(function(x){ return x.size == prop; }));  
 
     } 
 
    return atLeastOne ? out : items; 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div ng-repeat='size in ["small", "medium", "large"]'> 
 
    {{size}}: <input type='checkbox' ng-model='search[size]' />  
 
    </div>  
 
    <ul> 
 
    <li ng-repeat='item in items | filter : {selected: true} | oRfilter : search'>{{item | json}}</li> 
 
    </ul> 
 
</div>

您plunker不工作，因爲你有兩個分離控制器。

navController：

$scope.$watchCollection('search', function(arg){ 
    $scope.$parent.$broadcast('changed', arg); 
}); 

priceController：

$scope.search = {}; 
$scope.$on('changed', function(event, arg){ 
    $scope.search = arg; 
})