过滤器（filter）-----过滤器的主要用途就是一个格式化数据的小工具，一般用于服务端存储的数据转换为用户界面可以理解的数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body ng-app="app">
        <div id="">
            <!-- 管道符号"|" 后面跟的就是过滤器名称，":"后面跟参数-->
            <p>{{true | tr}}</p>
            <p>{{false | tr : 2}}</p>
        </div>
<script src="js/angular.js"></script>
<script>
    var app=angular.module('app',[])
    //filter 里面 tr 就是自定义的过滤器名称
    .filter('tr',function(){
        //param 为传入的参数，style对应过滤器传入的参数
        return function(param,style){
            //短路运算符
            style = style || 1;
            switch(style){
                case 1:
                    return param ? "kawa1-true":"kawa1-false";
                case 2:
                    return param ? "kawa2-true":"kawa2-false";
            }
        }
    });
</script>
    </body>
</html>

angularjs 自定义filter的更多相关文章

  1. angularjs自定义filter

    angular.Module API Overview Methods info([info]); provider(name, providerType); factory(name, provid ...

  2. angularjs之filter过滤器

    现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤 ...

  3. 转：AngularJS的Filter用法详解

    Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用 ...

  4. angularjs的$filter使用

    angularjs的$filter使用 $filter服务可以在js中对数据进行过滤处理,ng有几个内建的filter,其中有一个叫filter的filter,可方便的实现属性的过滤. 详细的API参 ...

  5. AngularJS的Filter用法详解

    上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式 ...

  6. Angularjs 使用filter格式化输出href

    工作中,由于是多级菜单,如果上级菜单为空,就会访问Angularjs 默认的state,然后再展开菜单,我找资料之后,才知道是通过filter来格式化输出数据的,格式是{{ expression | ...

  7. AngularJS过滤器filter入门

    在开发中,经常会遇到这样的场景 如用户的性别分为“男”和“女”,在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为“男”或“女”再显示出来: 如我要换个羽毛球拍, ...

  8. Asp.net mvc自定义Filter简单使用

    自定义Filter的基本思路是继承基类ActionFilterAttribute,并根据实际需要重写OnActionExecuting,OnActionExecuted,OnResultExecuti ...

  9. AngularJs自定义指令详解（1） - restrict

    下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...

随机推荐

  1. 菜鸟Scrum敏捷实践系列（一）用户故事概念

    菜鸟Scrum敏捷实践系列索引 菜鸟Scrum敏捷实践系列(一)用户故事概念 菜鸟Scrum敏捷实践系列(二)用户故事验收 菜鸟Scrum敏捷实践系列(三)用户故事的组织---功能架构的规划 敏捷开发 ...

  2. 通过hue提交oozie定时任务

    Oozie是什么? Oozie是一种Java Web应用程序,它运行在Java servlet容器——即Tomcat——中,并使用数据库来存储以下内容: 工作流定义 当前运行的工作流实例,包括实例的状 ...

  3. oracle 11g centos6 安装

    选型:32位的内存是个瓶颈,已经是64位的时代了.使用64位的CentOS6 和 64位的Oracle 11g R2在虚拟机器安装,采用hostonly方式设置网络注意:能上网的网卡要设置一下ICS( ...

  4. eclipse中代码格式化组合键失效了

    因为最近在整理java笔记,发现代码格式化的组合键失效了,但其他的组合键是好着的,设置里面找了也是对着的. 最后是在输入法的设置里面发现了它,原来是快捷键冲突了.取消输入法里面 的快捷键就好了,或者改 ...

  5. js放大镜

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 神奇的框架插件jquery layer

    layer 的这个相册功能是不是很炫酷,是滴,这就是layer,只要添加一个layerjs就行了 //Javascript代码 layer.photos({ photos: '#photosDemo' ...

  7. Excel图表-太极图

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  8. 性能测试分享：Jmeter多机协作原理

    性能测试分享:Jmeter多机协作原理   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:90 ...

  9. poptest老李谈Socket

    poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908821478,咨询电话010-845052 ...

  10. AngularJS1.X学习笔记5-加强版的表单

    大家愚人节快乐!表单是沟通服务器端和客户端的桥梁,为数据从客户端传到服务端打开了一扇大门.AngularJS增加了一些新特性,使我们能够更加方便的操作表单.OK!开始学习!学习使我快乐. 一.双向数据 ...