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