如何在AngularJS中遍历对象的筛选(ng-repeat筛选器)集合？

在AngularJS中，我们可以使用ng-repeat指令来循环遍历集合对象并将它们渲染到视图中。但是，有时候我们需要对集合中的对象进行筛选以满足一定的需求，这就需要使用ng-repeat的筛选器来实现。下面是如何使用ng-repeat筛选器的介绍。

ng-repeat筛选器的语法

在ng-repeat指令中，我们可以使用$符号来访问集合对象的属性，并使用管道符“|”来进行筛选。下面是ng-repeat筛选器的基本语法：

ng-repeat="item in items | filter: expression"

其中，expression是一个筛选表达式，可以是一个函数或一个简单的字符串。当expression为字符串时，筛选器会将其与所有对象的属性和子属性进行匹配并返回匹配的集合。当expression为函数时，筛选器会将其作为输入传递给每个对象，并返回满足条件的集合。

ng-repeat筛选器的示例

下面是一个简单的例子，演示如何使用ng-repeat筛选器来遍历一个对象集合，并仅显示名字包含“John”的对象。

<div ng-repeat="person in people | filter: 'John'">
  <p>Name: {{ person.name }}</p>
  <p>Age: {{ person.age }}</p>
</div>

在上面的代码中，我们使用filter筛选器以字符串“John”作为参数来进行筛选，并遍历people对象数组。当person.name属性包含“John”字符串时，该对象会被渲染到视图中。

如果我们想使用一个函数来进行筛选，可以像下面这样写：

<div ng-repeat="person in people | filter: filterByName">
  <p>Name: {{ person.name }}</p>
  <p>Age: {{ person.age }}</p>
</div>

在上面的代码中，我们定义了一个名为filterByName的函数，该函数将作为筛选器的expression参数传递给ng-repeat指令。下面是这个函数的实现：

$scope.filterByName = function(person) {
  return person.name.indexOf('John') !== -1;
};

在上面的代码中，我们使用JavaScript的indexOf函数来查找字符串中是否包含“John”，并将筛选结果返回给ng-repeat指令。

ng-repeat筛选器的更多选项

除了基本的字符串和函数筛选，ng-repeat筛选器还有许多更高级的选项，比如忽略大小写、过滤多个参数等等。下面是一个使用ignoreCase选项的例子，来忽略名字大小写：

<div ng-repeat="person in people | filter: { name: searchName } : true">
  <p>Name: {{ person.name }}</p>
  <p>Age: {{ person.age }}</p>
</div>

在上面的代码中，我们将一个对象作为筛选表达式的参数传递给ng-repeat指令，并将ignoreCase选项设置为true，以忽略名字的大小写。searchName变量是一个输入框中绑定的搜索关键字。

总结

在AngularJS中，使用ng-repeat筛选器可以对集合对象进行精细的筛选，并渲染满足条件的对象到视图中。学会使用ng-repeat筛选器可以使我们在实现复杂功能时更加得心应手。