过滤器（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. java学习笔记----运算符

    一.算数运算符 特别说明: 加 ,减 ,乘 ,除 与数学运算一致 取余符号看被除数 自加(减)运算:++a,--a;先做自加(自减)运算在做其他运算 a++,a--;先做其他运算在做自加(自减)运算 ...

  2. C#文件上传类，文件流，字节数组等

    using System;using System.IO;using System.Web;using System.Web.UI.WebControls; namespace DotNet.Util ...

  3. windows和linux删除文件方法

    Windows下bat文件内容如下:复制代码 代码如下: @echo offforfiles -p "D:\servers\apache2.2\logs" -s -m *.log ...

  4. firefox无法使用yslow的解决方案

    首先,Yslow不支持firefox 36及以上版本. 解决方案:使用yslow的书签版本 使用方法:1.访问这里 http://yslow.org/mobile/ 2.把页面最后的那个 Deskto ...

  5. 自适应的tab菜单栏

    代码部分: Css代码:*{ margin:0px; padding:0px; font-size:62.5%;}body{ background-color:#FFFFFF;}.zw-test-ti ...

  6. webpack快速掌握教程

    转载http://yijiebuyi.com/blog/46fb97b11fb8f4055e0b04d1cecb1f69.html #为什么用webpack 如果我们 前端 javascript 能像 ...

  7. 老李分享：loadrunner操作mysql数据库

    老李分享:loadrunner操作mysql数据库        在poptest测试开发工程师就业培训的课程中,针对一套商业系统进行性能测试,目标是mysql后台数据库的负载能力,在这里我把测试代码 ...

  8. POPTEST老李谈钩子

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

  9. Python Selenium设计模式-POM

    前言 本文就python selenium自动化测试实践中所需要的POM设计模式进行分享,以便大家在实践中对POM的特点.应用场景和核心思想有一定的理解和掌握. 为什么要用POM 基于python s ...

  10. 重新认识JavaScript里的数据类型

    一.序 数据类型,平时天天在用,今日闲暇便重新阅读了JavaScript数据类型这块,才发现平时用的时候有许些错误和不足,且对此深有感悟,便写下这篇文章加以巩固基础知识并有空翻出来温故而知新. 二.概 ...