Question

我所能找到的关于AngularJS过滤器的所有内容都是关于简单过滤器的简单示例（主要是关于单个字段的值）。

我所追求的虽然稍微复杂一点。想象一下，你有一个以下JSON对象的数组：

{
    "Categoria": "Informática",
    "Title": "Consultor DBA Oracle",
    "professionalarea": {
        "idAreaProfissional": 1,
        "description": "IT"
    },
    "Horario": "Estágio Profissional"
}, {
    "Categoria": "Finanças",
    "Title": "Gestor de Projeto",
    "professionalarea": {
        "idAreaProfissional": 1,
        "description": "IT"
    },
    "Horario": "Full-time"
}

我的目标是创建一个前端界面，允许我累积地将各种过滤器应用于那些JSON对象。

我有一个我关注的例子：

jsfiddle

Answer 1

对于过滤器，有很多选择：

string：该字符串用于匹配数组的内容。将返回与此字符串匹配的数组中具有字符串属性的所有字符串或对象。这也适用于嵌套对象属性。可以通过在字符串前加上！。

来取消谓词

示例（搜索是一个简单的搜索字符串，在所有字段中搜索）：

ng-repeat="player in filteredPlayers | filter:search"

对象：模式对象可用于过滤数组包含的对象的特定属性。例如{name：“M”，phone：“1”}谓词将返回一个项目数组，其属性名称包含“M”，属性手机包含“1”。可以使用特殊属性名称（默认为$）（例如，在{$：“text”}中）以接受对对象的任何属性或其嵌套对象属性的匹配。这相当于如上所述与字符串匹配的简单子字符串。可以使用anyPropertyKey参数覆盖特殊属性名称。可以通过在字符串前加上！来取消谓词。例如{name：“！M”}谓词将返回一个属性名称不包含“M”的项目数组。

示例（使用特定值过滤 2个特定字段）

ng-repeat="player in filteredPlayers | filter:{Categoria: cat,Title: tit}"

请注意，命名属性仅匹配同一级别的属性，而特殊$属性将匹配同一级别或更深层次的属性。例如。 {name：{first：'John'，last：'Doe'}}之类的数组项不会与{name：'John'}匹配，但会被{$：'John'}匹配。

function（value，index，array）：谓词函数可用于写入任意过滤器。为数组的每个元素调用该函数，其中元素，索引和整个数组本身作为参数。

最终结果是谓词返回true的那些元素的数组。

示例（使用自定义函数 selection()进行过滤）

ng-repeat="player in filteredPlayers | filter:selection"

在您的应用脚本中（自定义功能，仅过滤具有一些可选值的项目）：

$scope.selection=function(value, index, array){
  if ( value.Horario == 'Full time' || value.Horario == 'Estágio Profissional'){
    return true;
  }
  return false;
}

AngularJS - 基于类别的复杂过滤器

1 个答案: