filter in Angular

更新日期: 2017-06-14 阅读次数: 4303 分类: AngularJS

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 聊聊。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年04月11日 世界帕金森病日
2020年04月19日 谷雨
2020年04月21日 复活节
2020年04月22日 世界地球日
2020年04月23日 世界读书日
2020年04月26日 知识产权日
2020年04月30日 佛诞
2020年04月30日 全国交通安全反思日
2020年05月01日 国际劳动节
2020年05月04日 五四青年节
2020年05月05日 立夏
2020年05月08日 世界红十字日
查看更多节日