<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body ng-app="myApp">

    <div ng-controller="firstController">

        {{name | uppercase}}    <!--转换大写-->

        <br>

        {{name1 | lowercase }}    <!--转换小写-->

        <br>

        {{time | date:"yyyy-MM-dd hh:mm:ss" }}

        <br>

        {{120 | currency}}   <!--美元格式化-->

        {{120 | currency:"￥"}}   <!--中文格式化-->

        <br>

        {{123123123 | number }}    <!--格式化数字-->

        <br>

        {{1.23123123 | number:"1" }}   <!--保留小数点-->

        <br>

        {{[{name:"tanxu",age:11},{name:"张三",age:21},{name:"李四",age:31}] | filter:{name:"张三"} }}   <!--filter过滤-->

        <br>

        {{"我是一个中国人" | limitTo:2 }}    <!--litmitTo截取多少位数-->

        {{"huahuusdf" | limitTo:-2 }}   <!--从后面向前面截取2位-->

        <br>

        {{[{name:"tanxu",age:31},{name:"张三",age:21},{name:"李四",age:11}]  | orderBy :'age'}}  <!--对age进行排序-->

        <!--自定义过滤器的使用-->

        <br>

        {{"hi,tanxu" | myFilter:0:2 }}   <!--传入多个参数-->

        <!--引入外部的模块定义的过滤器,,先引入js文件，再加模块依赖-->

        <br>

        {{"hi,中国" | myFilter1:0:5 }}

    </div>

</body>

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

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

<script type="text/javascript">

    var app=angular.module("myApp",['filterModule']);

    app.controller('firstController',function($scope,$filter){

        $scope.name="tanxu";

        $scope.name1="TANXU";

        $scope.time="1234234234";

        $scope.name3=$filter('uppercase')($scope.name);  /*利用js的方式去过滤 ，注意：需要注入$filter服务才可以用*/

        console.log($scope.name3);

    });

    /*自定义过滤器---注意：在module中定义*/

    app.filter('myFilter',function(){

        return function(input,n1,n2){

            return input.replace(/hi/,"你好").substring(n1,n2);    /*定义一个自定义的过滤器，实现向替换hi为你好，接着截取n1-n2的字符串进行返回*/

        }

    })

</script>

</html>

在另一个过滤器模块中存放自定义过滤器

/**

 * Created by Administrator on 2016/3/28.

 */

/*将各种过滤器定义为一个模块*/

var filter=angular.module('filterModule',[]);

filter.filter('myFilter1',function(){

    return function(input,n1,n2){

        return input.replace(/hi/,"你好").substring(n1,n2);    /*定义一个自定义的过滤器，实现向替换hi为你好，接着截取n1-n2的字符串进行返回*/

    }

})

　　

ionic准备之angular基础——格式化数据以及过滤器（8）的更多相关文章

  1. ionic准备之angular基础——dom操作相关（6）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ionic准备之angular基础———服务provider 和 factory和service（9）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ionic准备之angular基础——模板引入（7）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. ionic准备之angular基础——$watch,$apply,$timeout方法（5）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ionic准备之angular基础——run方法（4）

    可以看到整个angular.module对象具有以下各种属性和方法 <!DOCTYPE html> <html lang="en"> <head> ...

  6. ionic准备之angular基础——继承（3）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 第214天:Angular 基础概念

    一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...

  8. Angular.js之内置过滤器学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. Angular基础---->AngularJS的使用(一)

    AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...

随机推荐

  1. 重建二叉树_C++

    一.题目背景 给定一个二叉树的前序和中序遍历,求出它的后序遍历 二叉树的遍历可参考 http://blog.csdn.net/fansongy/article/details/6798278/ 二.算 ...

  2. Apache二级域名实现

    Apache二级域名实现 首先,你的拥有一个有泛域名解析的顶级域名,例如: domain.com 其次,在 httpd.conf 中打开 mod_rewrite 之后,在 httpd.conf 的最后 ...

  3. Synthesis of memory barriers

    A framework is provided for automatic inference of memory fences in concurrent programs. A method is ...

  4. 几种常见的YUV格式--yuv422：yuv420【转】

    转自:http://blog.csdn.net/u012288815/article/details/51799477 关于yuv 格式 YUV 格式通常有两大类:打包(packed)格式和平面(pl ...

  5. AsBcd的意思

  6. XXXX公司微课大赛技术储备

    XXXX公司微课大赛技术储备 发短信验证 http://www.yunpian.com/ 发邮件 http://sendcloud.sohu.com/ flash头像上传组件 http://www.h ...

  7. [loj#101] 最大流 网络流模板

    #101. 最大流 内存限制:512 MiB时间限制:5000 ms标准输入输出 题目类型:传统评测方式:文本比较 上传者: 匿名 提交提交记录统计讨论测试数据   题目描述 这是一道模板题. 给定  ...

  8. (4)C#工具箱-菜单和工具栏

    1.ContextMenuStrip(右键菜单栏) 把contextMenuStrip控件拖到窗体上,会在窗体下面显示,点击控件在最上行显示菜单栏,可以任意设置.(运行以后不会在界面上显示,它需要预控 ...

  9. AppScan 浏览器兼容解决

    手动探索的时候,因为打开的浏览器是appscan自带的,可能会存在兼容性问题,有些页面无法正常打开.那么是否可以用我们电脑上的浏览器(IE .火狐.谷歌)来进行录制 菜单栏--工具---选项----首 ...

  10. tyvj——P1001 第K极值

    P1001 第K极值 时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景 成成第一次模拟赛 第一道 描述 给定一个长度为N(0<n<=10000)的序 ...