Question

我喜欢AngularJS过滤器的工作方式，并且只想在现有过滤器中添加一个函数，以允许使用数组来查看数值是否在数组中。

如果我有以下数据：

Queue = [
    {'Name':'John','Tier':'Gold','Status':'VIP'},
    {'Name':'Anna','Tier':'Silver','Status':'Normal'},
    {'Name':'Luke','Tier':'Gold','Status':'Normal'},
    {'Name':'Mary','Tier':'Bronze','Status':'Normal'},
    {'Name':'Jess','Tier':'Bronze','Status':'VIP'},
];
Priority = ['Gold','Silver'];

我想列出所有也是VIP的优先级成员的姓名。

<div ng-repeat="people in Queue | filter: {Tier:Priority} | filter: {Status:'VIP'}">{{ people.Name }}</div>

我想添加过滤功能来检查Tier是否等于Priority数组中的一个项目。

我已经研究过使用AngularJS构建自定义过滤器，但我不知道如何使客户过滤器与现有过滤器一样工作，即能够像现有过滤器那样处理对象，字符串或函数。

我不是在检查一个项目是否存在于数组中的代码之后，我正在以相同的方式创建过滤器的代码，然后我可以添加代码来检测给定的值是否为字符串或数组。

Answer 1

这是一个想法，它不是一个有效的代码。如果你在过滤器中传递参数，你可以写下这样的东西：

module.filter('filterName', function() {
return function(input, tier, status) {
 if (input.Tier == tier)
 {
  //do something
 }
 if (input.Status == status)
 {
  //do something
 }
 return input;
}   
});

在html -

<div ng-repeat="people in Queue | filterName:'Priority':'VIP'">{{ people.Name }}</div>

Answer 2

我会在这种情况下使用正则表达式来检查自定义过滤器。

在.html：

  <body ng-app="myApp">
     <tr ng-repeat="item in Queue | regex:'Tier':Priority | filter:{Status :'VIP'}">
  </body>

自定义过滤器：

var myApp = angular.module('myApp', []);
myApp.filter('regex', function() {
  return function(input, field, priList) {
     var result = [];
     var priListExp = priList.join("|");
     var patt = new RegExp(priListExp, "i"); // without , "i" if you want to use case insensitive
      input.forEach( function(pri){
         if(patt.test(pri[field])) {
           result.push(pri);
         }
     });

  return result;
  }
});

演示：Plunker

扩展AngularJS过滤器或构建自定义过滤器

2 个答案: