1. 简单的数组筛选
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 筛选迭代器</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h2>Filtered Items:</h2>
<ul>
<li ng-repeat="item in items | filter: 'A'">{{ item }}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.items = ['Apple', 'Banana', 'Orange', 'Grapes'];
});
</script>
</body>
</html>
在这个例子中，ng-repeat 使用了 filter 过滤器，只显示包含字母 'A' 的水果。
2. 使用对象属性进行筛选
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS 筛选迭代器</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<h2>Filtered Items:</h2>
<ul>
<li ng-repeat="person in people | filter: { age: 30 }">{{ person.name }} ({{ person.age }})</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.people = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Doe', age: 30 },
{ name: 'Bob', age: 28 }
];
});
</script>
</body>
</html>
在这个例子中，filter 过滤器使用了对象属性进行筛选，只显示年龄为 30 的人物。
这只是 AngularJS 中筛选迭代器的简单示例。filter 过滤器可以根据更多的条件进行筛选，包括自定义函数。详细的文档可以在 AngularJS 官方文档中找到。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4885/Angular