<!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. Intel与Motorola区别

    Intel低字节在前 Motorola高字节在前    在进行CAN总线通信设计或者测试过 程中,经常看到CAN总线信号的编码格式有两种定义:Intel格式与Motorola格式.究竟两种编码格式有什 ...

  2. OwnCloud 搭建

    owncloud 的安装方式可以在 [ 官网 ] 找到. 本文会说明 owncloud 在 CentOS 7.x 上基于 LAMP 安装, 以及简单的用 docker 镜像启动的例子. 基于 LAMP ...

  3. C# 技巧收藏

    IIS HTTP Error 500.21 - Internal Server Error 原因:在安装Framework v4.0之后,再启用IIS,导致Framework没有完全安装 解决:开始- ...

  4. Kotlin来了

    kotlin优点(主要是代码简洁度) 1.避免空指针异常,其次在一个文件中java方法必须写在class里面,而kotlin则没要求 2.在同一个文件中,有class a则不允许在class外的方法( ...

  5. Appium+python自动化8-Appium Python API【转载】

    前言: Appium Python API全集,不知道哪个大神整理的,这里贴出来分享给大家. 1.contexts contexts(self): Returns the contexts withi ...

  6. js中立即执行函数写法理解

    在理解了一些函数基本概念后,回头看看( function(){…} )()和( function (){…} () )这两种立即执行函数的写法,最初我以为是一个括号包裹匿名函数, 并后面加个括号立即调 ...

  7. 允许root用户登录ssh

    使用普通用户登录Ubuntu系统,打开命令行窗口 更改root用户密码,命令:sudo passwd root 首先输入当前用户的密码 然后输入root账户的密码 确认root用户的密码 编辑ssh的 ...

  8. 天梯L2-003-测试点

    测试点3无法过,题目说是正整数用了int,结果得用double输入才能AC.

  9. CF988 C. Equal Sums【map+pair/hash/任选两个序列，两个序列都除去他们中的一个数，使的总和相同】

    [链接]:CF988C [题意]:在n个序列中任选两个序列,两个序列都除去他们中的一个数,使的总和相同 [分析]:map<int,pair<int,int> > mp,从0~m ...

  10. USACO 4.4.2 追查坏牛奶 oj1341 网络流最小割问题

    描述 Description 你第一天接手三鹿牛奶公司就发生了一件倒霉的事情:公司不小心发送了一批有三聚氰胺的牛奶.很不幸,你发现这件事的时候,有三聚氰胺的牛奶已经进入了送货网.这个送货网很大,而且关 ...