filter in Angular

Being honest may not get you a lot of friends but it’ll always get you the right ones.

filter 是什么

http://docs.angularjs.org/guide/filter

A filter formats the value of an expression for display to the user. They can be used in view templates, controllers or services and it is easy to define your own filter.

注：

比较容易弄混的地方是，angular 里内置了一个 filter 名字就叫 filter 。。。

Angular 内置的 filter 有哪些呢

filter, currency, number, date, json, lowercase, uppercase, limitTo, orderBy

filter 通常用来做什么

• 格式化输出. 例如， currency，date, uppercase
• 前端过滤搜索。例如，内置的 filter

filter 的语法

在 template 中

• expression | filter1 | filter2 | ...
• expression | filter:argument1:argument2:...

在 controller 和 service 中

首先需要依赖注入，需要在原 filter 的名字后缀上 Filter, 例如 filterFilter, dateFilter, 然后直接使用即可。

uppercaseFilter("zhongwei");

自定义 filter, 开发自己的 filter

myModule.filter("appendSomething", function() {
    return function(input) {
       return input + "something";
    };
});

什么时候不应该使用 filter

实际使用中遇到的问题：

array | filter:searchText | showSearched:searchText

这里的 showSearched 作用是将搜到的 item，show 属性置为 true, 并返回一个新的 array. 终端报错

Error: 10 $digest() iterations reached. Aborting!

Google 得知是渲染时无限循环。

参考

• http://stackoverflow.com/questions/14376879/error-10-digest-iterations-reached-aborting-with-dynamic-sortby-predicate
• https://github.com/angular/angular.js/issues/4189
• http://stackoverflow.com/questions/19306452/how-to-fix-10-digest-iterations-reached-aborting-error-in-angular-1-2-fil
• http://docs.angularjs.org/guide/filter

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式