<!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. ACdream 1210 Chinese Girls' Amusement(高精度)

     Chinese Girls' Amusement Time Limit:1000MS     Memory Limit:64000KB     64bit IO Format:%lld & ...

  2. javascript jquery document.ready window.onload

    网易 博客 下载LOFTER客户端 注册登录  加关注 凡图的编程之路 2012年7月从一个编程新手的点点滴滴 首页 日志 LOFTER 相册 博友 关于我     日志       关于我 Holy ...

  3. 微信 编码要UTF8

    <%@ WebHandler Language="C#" Class="Handler" %> using System; using System ...

  4. UVA 11125 Arrange Some Marbles

    dp[i][j][m][n][s]表示最初选择j个i号颜色大理石.当前选择n个m号颜色大理石.剩余大理石状态(8进制数状压表示)最开始没看出状压..sad #include <map> # ...

  5. ScrollView下嵌套GridView或ListView默认不在顶部的解决方法

    自定义ScrollView重写下面的方法 /* ScrollView下嵌套GridView或ListView默认不在顶部的解决方法*/ @Override protected int computeS ...

  6. Centos 6.3软件安装

    一.软件安装包的类型: 1. tar包,如software-1.2.3-1.tar.gz.它是使用UNIX系统的打包工具tar打包的. 2. rpm包,如software-1.2.3-1.i386.r ...

  7. mysq 中 information_schema 库

    information_schema这个库,这个在mysql安装时就有了,提供了访问数据库元数据的方式.那什么是元数据库呢?元数据是关于数据的数据,如数据库名或表名,列的数据类型,或访问权限等.有些时 ...

  8. hdu 3047(扩展并查集)

    Zjnu Stadium Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  9. AC日记——奶牛集会 洛谷 P2345

    奶牛集会 思路: 把奶牛按照v排序: 然后,每次都把奶牛放入一个集合s: 因为奶牛已经排序: 所以,每次第i次放入奶牛起作用的v就是vi: 每次ans+=(xi*sum-sumxl)*vi+(sumx ...

  10. (5)Toad for oracle使用

    版本 toad 11.6 1.表数据颜色设置 误操作后表颜色变成这样 界面选择:view-Toad Optins 选择传统模式可以改回到原来的颜色 2.解决锁表 Database-Monitor-Se ...