<!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. Sql Server 事务/回滚

    ,'test1','test1') commit tran t1  ---提交事务 功能:实现begin tran 和commit tran之间的语句,任一如果出现错误,所有都不执 事务不是有错就回滚 ...

  2. 自定义Windows服务并实施安装

    1.新建项目DemoService,并添加windows服务,命名DemoService 2.添加代码 using System; using System.Collections.Generic; ...

  3. zero(NOIP模拟赛 Round 4)

    题目描述 假设x=N!,那么x的末尾有多少个零呢? 输入 一行,一个整数N. 输出 输出只有一个整数,表示x末尾零的个数. 这道题目,我们看一看数据范围, 10^1000肯定是高精啦! 然后我们再想一 ...

  4. css3实现图片划过一束光闪过效果

    该效果在京东里的图片有. .img { display:block; position: relative; width:800px; height:450px; margin:0 auto; } . ...

  5. 【Android开发日记】之入门篇（三）——Android目录结构

    本来的话,这一章想要介绍的是Android的系统架构,毕竟有了这些知识的储备,再去看实际的项目时才会更清楚地理解为什么要这样设计,同时在开发中遇到难题,也可以凭借着对Android的了解,尽快找出哪些 ...

  6. hdu 1217(Floyed)

    Arbitrage Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  7. 达梦数据库CAST与ROUND函数

    https://blog.csdn.net/zry1266/article/details/50856260

  8. 远程服务器的SqlServer允许本地连接

    最近做项目都是直接在阿里云买的服务器,并且SqlServer也是安装好的.但是默认的时候,这个服务器上的SqlServer并不允许直接在本地的SqlServer客户端访问,尽管服务器有公网IP. 想要 ...

  9. RANSAC中迭代次数的计算

    假设 $w=\frac{内点个数 }{所有点的个数}$. 则 $p_{0}=w^n$表示采样的$n$个点全为内点的概率(可重复) 则至少有一个为外点的概率$p_{1}=1-p_{0}$ 则重复$K$次 ...

  10. 51nod 1021 石子归并 【区间DP】

    1021 石子归并  基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题  收藏  关注 N堆石子摆成一条线.现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆石子 ...