<!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. webdriver操作iframe标记的编辑器

    1.iFrame有ID 或者 name的情况//进入id="frame1"的frame中,定位id="div1"的div和id="input1&quo ...

  2. 废弃sqlite代码,备查

    using System.Linq; using System.Text; using System.Threading.Tasks; using System.Reflection; using T ...

  3. chanme的博客搬家了!

    一直以来都想自己租一台服务器,买个域名做一个自己的博客,但是由于时间和知识的关系,以前还不太知道怎么搭一个博客.终于我在上个礼拜成功的迈出了建站的第一步,然后陆陆续续的也将一些后续的步骤做好了.所以今 ...

  4. java模拟生日发祝福

    1.新建customer表生日都选为当天 所需jar包 2.使用c3p0连接到数据的xml配置文件 3.连接数据库的工具类 package com.cc.birthday; import java.s ...

  5. 让Asp.net Web预启动

    IIS8以下解决方案: 当我们把网站部署在IIS7或IIS6S的时候,每当IIS或是Application Pool重启后,第一次请求网站反应总是很慢,原因大家都知道(不知道可以参考这个动画说明ASP ...

  6. RQNOJ PID217 / [NOIP1999]拦截导弹【n^2 / LIS】

    题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度.某天,雷达捕捉到敌国的导弹 ...

  7. 小白书 黑白图像【DFS/Flood Fill】

    http://blog.csdn.net/u010470972/article/details/33415617 Description 输入一个n×n的黑白图像(1表示黑色,0表示白色),任务是统计 ...

  8. Codeforces 570D - Tree Requests(树上启发式合并)

    570D - Tree Requests 题意 给出一棵树,每个节点上有字母,查询 u k,问以 u 为根节点的子树下,深度为 k 的所有子节点上的字母经过任意排列是否能构成回文串. 分析 一个数组 ...

  9. schema get_ddl

    select dbms_metadata.get_ddl('INDEX','INDEX_CC_TAXID','CACS9DBSIT1') from dual; select dbms_metadata ...

  10. [BZOJ3920]Yuuna的礼物

    题目大意: 给你一个长度为$n(n\le40000)$的数列$\{a_i\}(1\le a_i\le n)$,给出$m(m\le40000)$次询问,每次给出$l,r,k_1,k_2$询问区间$[l, ...