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

Extending AngularJS filter or building a custom filter

本文关键字：过滤器 自定义 构建 扩展 AngularJS      更新时间：2023-09-26

我喜欢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'];

我想列出我的所有Priority会员的名字，他们也是VIP。

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

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

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

我不太关注检查数组中是否存在项的代码，而是关注创建过滤器的代码，就像我可以添加代码来检测给定值是字符串还是数组一样。

在这种情况下，我将使用正则表达式通过自定义过滤器进行检查。

在.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

这是一个想法，不是一个工作代码。如果你在过滤器中传递参数，你可以这样写：

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>
相关文章：