代码下载：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. c++ 中double与string之间的转换,char *

    运行代码为 /* * main.cpp * * Created on: Apr 7, 2016 * Author: lizhen */ #include <iostream> //#inc ...

  2. 【转】tomcat与apache，tomcat与servlet的区别

    tomcat与apache的区别:(转自:http://blog.csdn.net/longzs/article/details/10959945) 1.apache支持静态页,tomcat支持动态的 ...

  3. redis 集群分配哈希曹

    重新分配哈希曹: ip:port 为当前redis集群任意节点ip和port redis-cli --cluster reshard ip:port 操作如图: 分配哈希槽有两种方式: 1.在其他节点 ...

  4. [LOJ#2324]「清华集训 2017」小Y和二叉树

    [LOJ#2324]「清华集训 2017」小Y和二叉树 试题描述 小Y是一个心灵手巧的OIer,她有许多二叉树模型. 小Y的二叉树模型中,每个结点都具有一个编号,小Y把她最喜欢的一个二叉树模型挂在了墙 ...

  5. [HNOI2007][bzoj1187] 神奇游乐园 [插头dp]

    题面: 传送门 给定一个四联通棋盘图,每个格子有权值,求一条总权值最大的回路 思路: 插头dp基础教程 棋盘? 回路? n,m<=10? 当然是插头dp啦~\(≧▽≦)/~ 然后发现这道题并不是 ...

  6. GROUP BY子句的查询中显示COUNT()为0的结果

    含有GROUP BY子句的查询中如何显示COUNT()为0的结果 在SQL Server数据库查询中,为了对查询结果进行对比.分析,我们经常会用到GROUP BY子句以及COUNT()函数来对查询结果 ...

  7. 2017-2018-2 20179204《网络攻防实践》第十三周学习总结 python实现国密算法

    国密商用算法是指国密SM系列算法,包括基于椭圆曲线的非对称公钥密码SM2算法.密码杂凑SM3算法.分组密码SM4算法,还有只以IP核形式提供的非公开算法流程的对称密码SM1算法等. 第1节 SM2非对 ...

  8. hdu 5055(模拟)

    Bob and math problem Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  9. hdu 1852(快速幂模+有除法的时候取模的公式)

    Beijing 2008 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/65535 K (Java/Others)Tota ...

  10. LeetCode OJ--Combination Sum **

    https://oj.leetcode.com/problems/combination-sum/ 给一列数,3 2 1 3 3 8 7 9 ,每个数可以重复多次,给target 7, 问可以加起来得 ...