多角度過濾器的文字，但也大於/小於

Question

tr.row(ng-repeat="i in items | filter:search" 

input(type="text" ng-model="search.desc") 
input(type="text" ng-model="search.comment") 

這很有用，我可以通過desc和評論過濾項目。現在

，我還需要通過

• 量
• 日期

過濾兩者都將有一個輸入用於大於和小於（相應的/前後）。 例如，對於量：

input(type="text" ng-model="search.amount") //this one would be the minimum value input 
input(type="text" ng-model="search.amount") //this one would be the maximum value input 

我如何結合這與我寧願要保持工作已經說明和註釋濾波器？我想我將不得不編寫一些自定義函數 - 但是我可以結合使用現有的文本過濾嗎？關於語法

注意：在使用玉模板引擎上的NodeJS

Answer 1

我認爲你必須寫一些代碼來檢查是否量滿足。由於過濾器可以鏈接，我認爲它無害。

第一你的名字分鐘&最大金額

input(type="text" ng-model="search.minAmount") //this one would be the minimum value input 
input(type="text" ng-model="search.maxAmount") //this one would be the maximum value input 

在你的控制器，定義一個函數

$scope.matchAmount = function(item){ 
    reuturn item.amount >= $scope.search.minAmount && item.amount <= $scope.search.maxAmount 
} 

最後，用它在你模板

ng-repeat="i in items | filter:search | filter: matchAmount 

Answer 2

你可以寫custom-filter說amountRange和dateRange。

對於amountRange濾波器輸入看起來像

input(type="text" ng-model="amount.minAmount") //instead of search.minAmount 
input(type="text" ng-model="amount.maxAmount") //instead of search.maxAmount 

可以在HTML

tr.row(ng-repeat="i in items | filter:search | amountRange:amount" 

您search過濾後申請amountRange的amountRange過濾

myApp.filter('amountRange', function() { 
    return function(input, amount) { 
     var filteredAmount = []; 
     angular.forEach(input, function(item) { 
     if (amount && (item.amount >= amount.minAmount && item.amount <= amount.maxAmount)) 
      filteredAmount.push(item); 
     }); 
     return filteredAmount.length > 0 ? filteredAmount : input 
    }; 
    }); 

她e是一個工作Demo爲amountRange過濾器，你可以做類似的dateRange過濾器。

Answer 3

我喜歡這兩個答案，但都有一些問題。 所以我不知道哪一個可以接受，但是兩個都挺好。

其實這就是我所做的，不確定我是否也願意接受我的，因爲它看起來可能有更高效的方法來做到這一點。

實際上，我也希望如果某人僅在minAmount中輸入金額，它將從minAmount向上過濾，並且如果僅maxAmount，則從maxAmount向下過濾。

這就是我想出了：

$scope.matchAmount = function(item) { 
    if ($scope.minAmount && (!$scope.maxAmount)) { 
     return item.amount >= $scope.minAmount; 
    } else if ((!$scope.minAmount) && $scope.maxAmount) { 
     return item.amount <= $scope.maxAmount; 
    } else if ($scope.minAmount && $scope.maxAmount) { 
     return item.amount >= $scope.minAmount && item.amount <= $scope.maxAmount; 
    } else { 
     return item.amount; 
    } 
    } 

而且，在視圖

input.filter(type="text" ng-model="minAmount" placeholder="Minimum amount") 

@sunderls，請記住您的ng-model='search.minAmount'沒有工作，需要'search.'前綴被刪除爲了工作在我的情況。