<div>{{ childrenArray | orderBy : 'age' }}</div> //按age属性值进行排序 <div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函数的返回值进行排序 <div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同，按照name进行排序
3. 自定义 filter
我们先定义个没有参数的过滤器。第一个例子来自 Angular 官方的文档。
我们希望检查数据是否为真，如果为真的话，显示为一个 ✓ ，否则的话，显示为 ✘， 在 Unicode 中，\u2713 -> ✓， \u2718 -> ✘，所以，我们需要做的就是检查数据是否为真，然后转化为这两个特殊字符进行输出。
app.filter('checkmark', function() { return function(input) { return input ? '\u2713' : '\u2718'; }; });
过滤器还可以有参数，比如内置的过滤器可以格式话货币或者日期。
在过滤器后面，使用冒号 (:) 分隔的就是过滤器的参数，在过滤器中，可以获取这个参数，如果有多个参数，就继续使用冒号 (:) 进行分隔，所以，过滤器可以有多个参数。
下面实现一个截断超长字符串的过滤器。
app.filter("truncate", function(){ return function(text, length){ if (text) { var ellipsis = text.length > length ? "..." : ""; return text.slice(0, length) + ellipsis; }; return text; } });
4. 定义高亮 filter
我们希望搜索的关键字在正文中高亮出来，正文就是过滤器的第一个参数，第二个参数就是搜索关键字，这样，我们的过滤器将会有两个参数了。
高亮的原理很简单，将需要高亮的内容使用 span 标记隔离出来，再加上一个特殊的 class 进行描述就可以了。
app.filter("highlight", function($sce, $log){ var fn = function(text, search){ $log.info("text: " + text); $log.info("search: " + search); if (!search) { return $sce.trustAsHtml(text); } text = encodeURI(text); search = encodeURI(search); var regex = new RegExp(search, 'gi') var result = text.replace(regex, '<span>$&</span>'); result = decodeURI(result); $log.info("result: " + result ); return $sce.trustAsHtml(result); }; return fn; });
$sce, 和 $log 是 angular 提供的两个服务，其中 $sce 服务需要使用 ngSanitize 模块。关于这个模块，可以参考：angular-ngSanitize模块-$sanitize服务详解
5. 定义服务对象
我们的页面可能很复杂，需要在一个控制器中输入关键字，但是，需要在多个控制器中使用这个关键字进行过滤，怎么处理呢？使用服务可以解决这个问题。
在 Angular 中，服务就是一个单例对象，我们使用 factory 可以直接定义一个服务对象。
app.factory("notifyService", function(){ var target = { search:"key" }; return target; });
在需要使用这个对象的地方，直接注入就可以获取这个对象了。
6. 定义搜索 Controller
在搜索控制器中，我们希望用户提供搜索关键字。为了方便检查，我们顺便将用户的输入展示出来。
<div ng-controller="tools"> <div> <input type="text" ng-model="notify.search" value=""/> </div> <div> {{notify.search}} </div> </div>
控制器的实现，我们将服务对象直接注入到控制器中，然后绑定到当前的 $scope 上，以便在当前控制器中实现绑定。
app.controller("tools", function($scope, notifyService){ $scope.notify = notifyService; });
现在，我们可以直接输入搜索关键字，这个关键字将被保存到服务对象中，可以在当前的 module 中的各个控制器中访问这个服务对象。
7. 在内容 Controller 中使用 filter
现在，我们已经有了过滤器，也可以直接通过服务对象来获取搜索关键字，现在组合起来就可以使用了。text 中是我们的正文内容。
<div ng-controller="search"> <div ng-bind-html="text | highlight:notify.search"> </div> </div>
下面再看看 highlight 和 notify.search 来自何方。
app.controller("search", function($scope, $log, notifyService){ $scope.text = "hello, world. hello, world. hello, world."; $scope.notify = notifyService; })
为了在当前控制器中使用搜索关键字，关键是在搜索关键字发生变化的时候，还需要自动更新，我们将服务对象绑定到当前的 $scope 中，这是引用的名称为 notify.
这样，在复杂页面中，我们可能存在多个控制器，在每个需要高亮的控制器中，我们只需要注入服务对象，就可以直接获取到当前的搜索关键字，配合使用过滤器，就可以直接实现全局高亮了。
8. 总结