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

如何将此与我希望保留的已经正常工作的desc和评论过滤器结合起来？我想我将不得不编写一些自定义函数 - 但是我可以将这种功能与现有的文本过滤相结合吗？

注意语法：在nodejs上使用jade模板引擎

Answer 1

我认为你必须写一些代码来检查数量是否满足。由于过滤器可以链接，我认为它无害。

首先你命名为min＆amp;最高金额

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

您可以在amountRange

中的search过滤器后应用HTML

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

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
    };
  });

以下是amountRange过滤器的工作 Demo ，您可以对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.'前缀以便在我的情况下工作。

多个角度滤波器用于文本但也大于/小于

3 个答案: