在使用ng框架做项目的时候，我们可能会使用到ng自带的过滤器，来进行数据的筛选

一：ng自带的过滤器：currency ,date,limitTo,lowercase,uppercase,number,orderBy ,json,filter

过滤器有两种使用方法：第一种，页面是直接使用；第二种，js中使用

以上的过滤器的使用时偏简单的，查看文档对你很有用

这里，我们来讲解一下 上面的简单中的很少用到的json,filter

关于json过滤器的作用是将一个javaScript对象转化为一个JSON字符串：

 demo: 

  <div>

     {{ {name: 'Ari', City: 'SanFrancisco'} | json }}

  </div>

页面显示的效果是:{ "name": "Ari", "City": "SanFrancisco" }

关于filter过滤器的用法：

页面中直接使用

 <div>

    {{ ["aaassddd","bbbdddeee","kkklljj"] | filter:"!e" }}

  </div>

页面显示的效果是：["aaassddd","kkklljj"]

举一个在js中使用的demo吧

<!doctype html>

<html lang="en" ng-app="myApp">

 <head>

   <script src="angular.js"></script>

 </head>

 <body>

     <div ng-controller="filterCtrl">

                 {{name}}

                 {{dollar}}

                 {{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}

                 {{ {name: 'Ari', City: 'SanFrancisco'} | json }}

                 {{ ["aaassddd","bbbdddeee","kkklljj"] | filter:"!e" }}

       </div>

 </body>

</html>

<script>

         angular.module("myApp",[])

                 .controller("filterCtrl",["$scope","$filter","currencyFilter",function(s,f,c){//方式一：直接使用$filter, 方式二：使用***Filter

                      s.name=f('lowercase')("ARTDF");

                      s.dollar=c(234);

       }])

</script>

二:讲解了ng的内置过滤器，我们来 学学如何自定义过滤器

    ng的自定义过滤器返回的是一个函数，我们可以在这个函数里进行系列操作

   js:

 var myFilter=angular.module("filterModule",[])

  .filter("filter1",function(){

    return function(item){

       return item+'ABCDE';

    }

  });

html:

<div>{{432432423432| date:"yyyy-MM-dd"|filter1}}</div>

结果：1983-09-15ABCDE

demo2:自定义过滤器（直接上例子）

<!doctype html>

<html lang="en" ng-app="myApp">

 <head>

  <script src="lodash.js"></script>

    <script src="angular.js"></script>

 </head>

 <body ng-controller="myCtrl">

      <div ng-repeat="t in list | filterByObj:arr">{{t}}</div>

 </body>

</html>

<script>

  var app=angular

        .module("myApp",[])

           .controller("myCtrl",function($scope){

                 $scope.list=[1,3,4,5,12,23,6];

                 $scope.arr=[6,5,3,1];

           })

        .filter("filterByObj",[function(){

                 return function(list,obj){

                      var result=[];

                      angular.forEach(list,function(item){

                            var isEqual=true;

                            for(var e in obj){

                                  if(item==obj[e]){

                                       result.push(item);

                                  }

                            }

                      });

           return result;

                 }

           }]);

</script>

结果：1,3,5,6

借鉴资源链接：http://www.oschina.net/translate/angularjs-filter-creating-custom-filter

关于ng的过滤器的详细解释angular-filter的更多相关文章

  1. Linux - 命令行 管道(Pipelines) 详细解释

    命令行 管道(Pipelines) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/24249529 管道操作符" ...

  2. ng 自定义过滤器的创建和使用

    过滤器的本质就是一个方法,参数就是输入的值以及给过滤器指定的参数,返回值就是处理后要显示的值. ①过滤器创建var app = angular.module();app.filter(‘名称’,fun ...

  3. Action的三种实现方式,struts.xml配置的详细解释及其简单执行过程(二)

    勿以恶小而为之,勿以善小而不为--------------------------刘备 劝诸君,多行善事积福报,莫作恶 上一章简单介绍了Struts2的'两个蝴蝶飞,你好' (一),如果没有看过,请观 ...

  4. .htaccess语法之RewriteCond与RewriteRule指令格式详细解释

    htaccess语法之RewriteCond与RewriteRule指令格式详细解释 (2012-11-09 18:09:08) 转载▼ 标签:  htaccess it 分类: 网络 上文htacc ...

  5. cookie的详细解释

    突然看到网页上中英文切换的效果,不明白怎么弄得查了查 查到了cookie 并且附有详细解释 就copy留作 以后温习 http://blog.csdn.net/xidor/article/detail ...

  6. tar命令的详细解释

    tar命令的详细解释 标签: linuxfileoutputbashinputshell 2010-05-04 12:11 235881人阅读 评论(12) 收藏 举报  分类: linux/unix ...

  7. Linux学习笔记15——GDB 命令详细解释【转】

    GDB 命令详细解释 Linux中包含有一个很有用的调试工具--gdb(GNU Debuger),它可以用来调试C和C++程序,功能不亚于Windows下的许多图形界面的调试工具. 和所有常用的调试工 ...

  8. C语言 - 结构体(struct)比特字段(:) 详细解释

    结构体(struct)比特字段(:) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy/article/details/26722511 结构体(struc ...

  9. 姿势体系结构的详细解释 -- C

    我基本上总结出以下4部分: 1.问题的足迹大小. 2.字节对齐问题. 3.特别保留位0. 4.这种结构被存储在存储器中的位置. #include <stdio.h> #include &l ...

随机推荐

  1. linux 普通synflood攻击防范网络参数设置

    linux如何防SYN攻击 [root@web ~]# netstat -anp |awk '{print $6}'|sort|uniq -c |sort -rn 172 ESTABLISHED 59 ...

  2. JavaScript--跨域

    跨域 什么是跨域? 跨域请求就是不同域的网站之间的文件数据之间的传送 ,由于浏览器的同源策略机制(基于安全,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性)Ajax直接请求普通 ...

  3. [Android]如何减小APK的大小

    能不引用的外部包就不用,删除没用的图片.xml,优化代码去掉没用的部分,能异步下载的资源就运行时从网络上下载.

  4. Spring整合hibernate：3、使用XML进行声明式的事务管理

    配置applicationContext.xml文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...

  5. Win10 怎么给php文件设置默认打开应用

    一,首先以管理员身份打开命令提示符 二,assoc .php=phpfile 创建一个文件关联 三,ftype phpfile="E:\Program Files\Sublime Text ...

  6. 几种常见的微服务架构方案——ZeroC IceGrid、Spring Cloud、基于消息队列、Docker Swarm

    微服务架构是当前很热门的一个概念,它不是凭空产生的,是技术发展的必然结果.虽然微服务架构没有公认的技术标准和规范草案,但业界已经有一些很有影响力的开源微服务架构平台,架构师可以根据公司的技术实力并结合 ...

  7. EasyPlayerPro安卓流媒体播放器实现Android H.265硬解码流程

    本文转自EasyDarwin团队成员John的博客:http://blog.csdn.net/jyt0551/article/details/74502627 H.265编码算法作为新一代视频编码标准 ...

  8. BeautifulSoup的安装和使用

    Python用做数据处理还是相当不错的,如果你想要做爬虫,python是很好的选择,它有很多已经写好的类包,只要调用,即可完成很多复杂的功能,此文中所有的功能都是基于BeautifulSoup这个包. ...

  9. PHP进程之信号捕捉中的declare(ticks=1)

    转自:http://blog.csdn.net/gavin_new/article/details/65629223 一. 语句在php中的意义 php中,declare(ticks=n)和regis ...

  10. 图文详解如何利用Git+Github进行团队协作开发

    团队协作开发中,大部分都会用到版本控制软件,比如Git.Svn等.本文将通过一个实例,详细讲解在真实的工作环境中,一个团队应该如何利用Git+Github进行协作开发,即详解Git工作流程.并就其中比 ...