<!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. loj 数列分块入门 5 7 8

    5 题意 给出一个长为\(n\)的数列,以及\(n\)个操作,操作涉及区间开方,区间求和. 思路 用\(tag\)记录这一块是否已全为\(1\). 除分块外,还可用 树状数组+并查集(链表) 或者 线 ...

  2. visual studio 2005 win7 64位版下载

    http://www.121down.com/soft/softview-19659.html 软件标签: visual studio visual studio 2005是由微软推出的一款基于.ne ...

  3. C3P0连接池工具类使用

    c3p0的基本连接配置文件 c3p0-config.xml <c3p0-config> <default-config> <property name="dri ...

  4. Python的程序结构[6] -> 迭代器/Iterator -> 迭代器浅析

    迭代器 / Iteratior 目录 可迭代对象与迭代器协议 迭代器 迭代器(模拟)的建立 1 可迭代对象与迭代器协议 对于迭代器首先需要了解两个定义,迭代器协议 (Iterator Protocol ...

  5. 【CodeForces 830C】奇怪的降复杂度

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=60638239 description 有n棵竹子 ...

  6. ResourceBundle (读取properties文件及中文乱码解决方法)

    原文:http://blog.csdn.net/joecheungdishuiya/article/details/6304993 public class test { static Resourc ...

  7. centos查找文件

    centos查找文件 [root@localhost ~]# find / -name libmysqlclient.so

  8. App Distribution Guide (二)

    Configuring Your Xcode Project for Distribution  You can edit your project settings anytime, but som ...

  9. 制作ubuntu16.04的docker镜像

    来自http://www.jianshu.com/p/029a1ed4fd64 背景 因为笔者是在vagrant转移到docker的玩家,所以对系统镜像情有独钟.如果你是windows.mac用户,那 ...

  10. python scrapy简单爬虫记录(实现简单爬取知乎)

    之前写了个scrapy的学习记录,只是简单的介绍了下scrapy的一些内容,并没有实际的例子,现在开始记录例子 使用的环境是python2.7, scrapy1.2.0 首先创建项目 在要建立项目的目 ...