代码下载：https://files.cnblogs.com/files/xiandedanteng/angularJSFilter.rar

显示效果：

页面代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="notesApp">
 <head>
  <title> New Document </title>
  <style>
    .bluetext{
        color:blue;
    }
  </style>
    <meta charset="gbk">
    <script src="angular1.4.6.min.js"></script>
 </head>

 <body ng-controller="MainCtrl as ctrl">
    <p>Hi,I am <span class="bluetext" ng-bind="ctrl.user.name|uppercase"></span> .Everyone like to call me <span  class="bluetext" ng-bind="ctrl.user.shortname|lowercase"></span></p>
    <p>I have <span  class="bluetext" ng-bind="ctrl.user.fans|number"></span> fans around the world.</p>
    <p>I can bring you <span  class="bluetext" ng-bind="ctrl.user.money|currency"></span> </p>
    <p>Now it is <span  class="bluetext" ng-bind="ctrl.user.time|date:'medium'"></span>,date is <span  class="bluetext" ng-bind="ctrl.user.time|date "></span>.</p>
 </body>
</html>
<script type="text/javascript">
<!--
    angular.module('notesApp',[])
     .controller('MainCtrl',[function(){
       var self=this;

       self.user={name:"Angular JavaScript",shortname:"AglJS",fans:123456789,money:9087564312};
       self.user.time=new Date().getTime();
     }]);
//-->
</script>

AngularJS的过滤器示例的更多相关文章

  1. 走进AngularJs(七) 过滤器（filter） - 吕大豹

    时间 2013-12-15 16:22:00  博客园-原创精华区 原文  http://www.cnblogs.com/lvdabao/p/3475426.html 主题 AngularJS 过滤器 ...

  2. AngularJs(八) 过滤器filter创建

    大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constan ...

  3. AngularJS之过滤器

    AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写. 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器.例如,假设我们希望将字符串转换成大写,可 ...

  4. 走进AngularJs(七) 过滤器（filter）

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们 ...

  5. AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9

    1.切换目录,启动项目 git checkout step- npm start 2.需求: 格式化要显示的数据. 比如要将true-->yes,false-->no,这样相互替换. 3. ...

  6. 前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  7. AngularJS开发指南13：AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...

  8. angularJS自定义过滤器、服务和指令

    自定义过滤器 mainApp.filter('mayfilter',function(){ return function(input){ (过滤逻辑代码) } });   自定义创建指令 mainA ...

  9. 接近带给你AngularJS - 经验说明示例

    接近带给你AngularJS列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

随机推荐

  1. SQLSERVER 数据库基础操作

    1.修改表中字段的长度,类型为varchar,从30改到50    语句执行(注:当前为30):    alter table 表名 alter column 列名 varchar(50)  2.增加 ...

  2. Codeforces Round #364 (Div. 2) C 二分处理+求区间不同字符的个数 尺取法

    C. They Are Everywhere time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  3. 【自己D自己】WC2019总结

    好吧写着写着写成自黑文了. 这是我时隔一个月写的,寒假非常自闭,肝童年游戏赛尔号来着…… 没玩过的无视 作为一个 $BJ$ 蒟蒻,第一次飞到广州二中这么远的地方(我没出过国,去广州算是很远的一次了). ...

  4. codeforces 757F - 最短路DAG+灭绝树

    Description 给定一个n个点,m条边的带权无向图,和起点S.请你选择一个点u(u!=S),使得在图中删掉点u 后,有尽可能多的点到S的最短距离改变. Solution 先建出最短路DAG,在 ...

  5. Codeforces 460D. Little Victor and Set

    D. Little Victor and Set time limit per test:1 second memory limit per test:256 megabytes input:stan ...

  6. 洛谷P1135 奇怪的电梯

    题目描述 呵呵,有一天我做了一个梦,梦见了一种很奇怪的电梯.大楼的每一层楼都可以停电梯,而且第i层楼 (1<=i<=N)上有一个数字Ki(0<=Ki<=N).电梯只有四个按钮: ...

  7. 【POJ3667】Hotel（线段树）

    题意:有n个依次编号的元素,要求维护以下两个操作: 1.询问整个数列中是否有长度>=x的连续的一段未被标记的元素,若无输出0,若有输出最小的开始编号ans并将[ans,ans+x-1]标记 2. ...

  8. Boost::thread库的使用（转）

    原文转自 http://blog.csdn.net/lee353086/article/details/4673790 本文主要由线程启动.Interruption机制.线程同步.等待线程退出.Thr ...

  9. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---51

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  10. C#使用DirectoryEntry类操作Windows帐户

    1.创建windows帐户 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /// <summary> /// 创建Windows帐户 /// </summa ...