1. 3种过滤方式
<html>
<head>
<meta charset='utf-8'>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl"> <h3>Filter by String</h3>
<form class="form-inline">
<input ng-model="query" type="text" placeholder="Filter by name" autofocus>
</form>
<ul ng-repeat="friend in friends | filter: query | orderBy: 'name' ">
<li>{{friend.name}} ({{friend.age}})</li>
</ul>
</div> <div ng-controller="MyCtrl">
<h3>Filter by Object</h3>
<form class="form-inline">
<input ng-model="query" type="text" placeholder="Filter by name and age=20">
</form>
<ul ng-repeat="friend in friends | filter: { name: query, age: '20' } | orderBy: 'name' ">
<li>{{friend.name}} ({{friend.age}})</li>
</ul>
</div> <div ng-controller="MyCtrl">
<h3>Filter by Predicate Function</h3>
<ul ng-repeat="friend in friends | filter: filterFunction | orderBy: 'name' ">
<li>{{friend.name}} ({{friend.age}})</li>
</ul>
</div>
</body>
</html>
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {
$scope.friends = [
{ name: "Peter", age: 20 },
{ name: "Pablo", age: 55 },
{ name: "Linda", age: 20 },
{ name: "Marta", age: 37 },
{ name: "Othello", age: 20 },
{ name: "Markus", age: 32 }
];
$scope.filterFunction = function(element) {
return element.name.match(/^Ma/) ? true : false;
};
});
3种过滤方式，第一种——
根据变量过滤。
第一个过滤中，我们对着input使用了ng-model，使得过滤条件中添加了filter: query
乍一看没什么问题，运行起来也还可以，但是问题是当我们输入数字的时候，连后面的年龄也会变成搜索条件，如果对象中的属性只有几个还好说，一旦多起来，这个过滤根本就是不可行的。
【所以我们需要将滤过变得更加精确。】
结果就是第二个过滤，根据对象提供的条件进行过滤，过滤条件变成了对象filter: { name: query, age: '20' }，这便使得我们过滤的更加方便和精确。
第三种过滤方法是通过函数进行过滤。
当我们对着filter：进行修改，将值改成true的时候，你会发现没有一个符合的数值出现，而改为false，就会出现所有的信息。于是，只要我们创建一个判断函数，这个函数需要带入判断对象作为参数并返回一个布尔值，那么这个函数就可以当过滤器使用了，并且，由于是个函数，所以过滤机制便可以写的复杂的多。