1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body ng-app="myApp">
  8.     <div ng-controller="firstController">
  9.         {{name | uppercase}}    <!--转换大写-->
  10.         <br>
  11.  
  12.         {{name1 | lowercase }}    <!--转换小写-->
  13.  
  14.         <br>
  15.         {{time | date:"yyyy-MM-dd hh:mm:ss" }}
  16.  
  17.         <br>
  18.         {{120 | currency}}   <!--美元格式化-->
  19.         {{120 | currency:"￥"}}   <!--中文格式化-->
  20.  
  21.         <br>
  22.         {{123123123 | number }}    <!--格式化数字-->
  23.         <br>
  24.         {{1.23123123 | number:"1" }}   <!--保留小数点-->
  25.  
  26.         <br>
  27.         {{[{name:"tanxu",age:11},{name:"张三",age:21},{name:"李四",age:31}] | filter:{name:"张三"} }}   <!--filter过滤-->
  28.  
  29.         <br>
  30.         {{"我是一个中国人" | limitTo:2 }}    <!--litmitTo截取多少位数-->
  31.         {{"huahuusdf" | limitTo:-2 }}   <!--从后面向前面截取2位-->
  32.  
  33.         <br>
  34.         {{[{name:"tanxu",age:31},{name:"张三",age:21},{name:"李四",age:11}]  | orderBy :'age'}}  <!--对age进行排序-->
  35.  
  36.         <!--自定义过滤器的使用-->
  37.         <br>
  38.         {{"hi,tanxu" | myFilter:0:2 }}   <!--传入多个参数-->
  39.  
  40.         <!--引入外部的模块定义的过滤器,,先引入js文件，再加模块依赖-->
  41.         <br>
  42.         {{"hi,中国" | myFilter1:0:5 }}
  43.     </div>
  44. </body>
  45. <script src="angular/angular.js"></script>
  46. <script src="filter.js"></script>
  47. <script type="text/javascript">
  48.     var app=angular.module("myApp",['filterModule']);
  49.  
  50.     app.controller('firstController',function($scope,$filter){
  51.         $scope.name="tanxu";
  52.  
  53.         $scope.name1="TANXU";
  54.  
  55.         $scope.time="1234234234";
  56.  
  57.         $scope.name3=$filter('uppercase')($scope.name);  /*利用js的方式去过滤 ，注意：需要注入$filter服务才可以用*/
  58.         console.log($scope.name3);
  59.  
  60.     });
  61.  
  62.     /*自定义过滤器---注意：在module中定义*/
  63.     app.filter('myFilter',function(){
  64.         return function(input,n1,n2){
  65.             return input.replace(/hi/,"你好").substring(n1,n2);    /*定义一个自定义的过滤器，实现向替换hi为你好，接着截取n1-n2的字符串进行返回*/
  66.         }
  67.     })
  68.  
  69. </script>
  70. </html>

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

  1. /**
  2.  * Created by Administrator on 2016/3/28.
  3.  */
  4. /*将各种过滤器定义为一个模块*/
  5. var filter=angular.module('filterModule',[]);
  6.  
  7. filter.filter('myFilter1',function(){
  8.     return function(input,n1,n2){
  9.         return input.replace(/hi/,"你好").substring(n1,n2);    /*定义一个自定义的过滤器，实现向替换hi为你好，接着截取n1-n2的字符串进行返回*/
  10.     }
  11. })

　　

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. 2015年4月1日 14:36:56 EF 主从表更新

    公司封装框架的人把eF封在了工作单元里面,使用了Unitofwork这样的形式, 我用代码生成器生成了基础的单表操作的代码. 这种方式对多表有问题. 暂时只得,一张表一张表地操作, 我采用先用List ...

  2. AUTOIT3设置用户包含目录

     

  3. python接口自动化9-https请求（SSL）【转载】

    本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/python%E6%8E%A5%E5%8F%A3%E8%87%AA%E5%8A%A8%E ...

  4. J.U.C并发框架源码阅读（五）Semaphore

    基于版本jdk1.7.0_80 java.util.concurrent.Semaphore 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL. Use is sub ...

  5. HDU 6301.Distinct Values-贪心、构造字典序最小的数列 (2018 Multi-University Training Contest 1 1004)

    HDU6301.Distinct Values 这个题就是给你区间要求区间内的数都不相同,然后要求是字典序最小,直接贪心走一遍,但是自己写的时候,思路没有错,初始化写挫了... 将区间按左端点小的排序 ...

  6. 51nod 1004 n^n的末位数字【快速幂】

    1004 n^n的末位数字 题目来源: Author Ignatius.L (Hdu 1061) 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 给出 ...

  7. Code+ A 晨跑【三个数的最小公倍数】

    时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 262144K,其他语言524288K64bit IO Format: %lld 题目描述 “无体育,不清华”.“每天锻炼一小时,健康工作 ...

  8. Xamarin XAML语言教程使用方法设置进度条进度

    Xamarin XAML语言教程使用方法设置进度条进度 在ProgressBar中定义了一个ProgressTo方法,此方法也可以用来对进度条当前的进行进行设置,ProgressTo与Progress ...

  9. 【bzoj4403】【序列统计】不降转升+组合数添项合并

    (上不了p站我要死了,侵权度娘背锅) Description 给定三个正整数N.L和R,统计长度在1到N之间,元素大小都在L到R之间的单调不降序列的数量.输出答案对10^6+3取模的结果. Input ...

  10. [LOJ6277]数列分块入门 1

    题目大意: 给你一个长度为$n(n\leq 50000)$的序列$A$,支持进行以下两种操作: 1.将区间$[l,r]$中所有数加上$c$: 2.询问$A_r$的值.思路: 分块. 对于整块的数据打标 ...