<!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. Extend Html.EditorFor MVC

    原文发布时间为:2011-09-07 -- 来源于本人的百度文章 [由搬家工具导入] http://aspadvice.com/blogs/kiran/archive/2009/11/29/Addin ...

  2. Cookies/Session机制详解

    # 转载自:https://blog.csdn.net/fangaoxin/article/details/6952954/ 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话 ...

  3. 关于boostrapValidator动态添加字段(addField)验证的bug

    每次码博客,都觉得自己怀才不遇,哎~脑袋有瑕疵,文笔拿不粗手,就直接上干货吧. 在使用boostrapValidator这个验证插件的时候,如果某一个字段是动态添加来的,我们需要调用方法:addFie ...

  4. poj 3348(凸包面积)

    Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 8063   Accepted: 3651 Description ...

  5. jquery导出Excel表格

    1.引用js插件 <script src="tableExport.js"></script> <script src="jquery.ba ...

  6. Codeforces Round #448 (Div. 2) A. Pizza Separation【前缀和/枚举/将圆(披萨)分为连续的两块使其差最小】

    A. Pizza Separation time limit per test 1 second memory limit per test 256 megabytes input standard ...

  7. centos 部署web项目

    Linux下安装Tomcat服务器和部署Web应用 一.上传Tomcat服务器

  8. jenkins笔记:手动更新插件

    jenkins服务器连不了外网,需要手动更新插件.上https://wiki.jenkins-ci.org搜索相应的插件,下载Latest Release-最新版本的.hpi.在系统管理->插件 ...

  9. UVA——11988 Broken Keyboard (a.k.a. Beiju Text)

    11988 Broken Keyboard (a.k.a. Beiju Text)You’re typing a long text with a broken keyboard. Well it’s ...

  10. SPOJ705 SUBST1 - New Distinct Substrings(后缀数组)

    给一个字符串求有多少个不相同子串. 每一个子串一定都是某一个后缀的前缀.由此可以推断出总共有(1+n)*n/2个子串,那么下面的任务就是找这些子串中重复的子串. 在后缀数组中后缀都是排完序的,从sa[ ...