filter in Angular

更新日期: 2017-06-14 阅读次数: 4522 分类: 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年07月11日 世界人口日
2020年07月22日 大暑
2020年07月30日 非洲妇女日
2020年08月01日 八一建军节
2020年08月06日 国际电影节
2020年08月07日 立秋
2020年08月15日 日本投降日
2020年08月22日 处暑
2020年08月25日 七夕
2020年09月02日 中元节
2020年09月03日 抗日胜利纪念日
2020年09月07日 白露
查看更多节日