ng-重复带有数字和日期的多个过滤器

ng-repeat multiple filter with number and date

本文关键字：日期 过滤器 数字 ng-      更新时间：2023-09-26

我正在使用ng-repeat绘制表格线条，目前正在过滤多个文本参数。下面是一个包含固定字符串的简化示例

<tr ng-repeat="thisOffer in offerList | filter: {name: 'hotel', id: 'H2O_'}"></tr>

这工作正常，现在我也想过滤一个数字，测试它是否低于给定值。是否可以使用如下所示的过滤器？我在角度文档中找不到类似的东西，但我不敢相信不存在简单的解决方案

<tr ng-repeat="thisOffer in offerList | filter: {name: 'hotel', id: 'H2O_', number: '<5' }"></tr>
<tr ng-repeat="thisOffer in offerList | filter: {name: 'hotel', id: 'H2O_'} | filter: 'thisOffer.number < 5' "></tr>

应用这个答案后，这个小提琴适合你（灵感来自这个答案）

<div ng-app>
  <div ng-controller="TodoCtrl">
    <ul>
      <li ng-repeat="friend in friends | filter: {name: 'John'} | filter: greaterThan('phone', 1)">
        <span>{{friend.name}}</span>
        <span>{{friend.phone}}</span>
      </li>
    </ul>
  </div>
</div>

根据 https://docs.angularjs.org/guide/filter，您可以链接过滤器，因此您的第二个解决方案应该可以工作。

如果没有，请提供一个小提琴，以便我调查它

您需要在相关范围内创建一个谓词函数，并在 ng-repeat 中使用它，如下所示：

<tr ng-repeat="thisOffer in offerList | filter: lessThan('Number', 5)""></tr>

在相关作用域上创建一个函数：

$scope.greaterThan = function(prop, val){
    return function(item){
      return item[prop] > val;
    }
}

作为第一个参数，它采用对象的属性名称。第二个参数是整数值。

像这样在您的视图中使用它：

<tr ng-repeat="thisOffer in offerList | filter: greaterThan('Number', 0)">
相关文章：