代码下载：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. 【线性基】51nod1312 最大异或和&LOJ114 k大异或和

    1312 最大异或和 题目来源: TopCoder 基准时间限制:1 秒 空间限制:131072 KB 分值: 320 难度:7级算法题   有一个正整数数组S,S中有N个元素,这些元素分别是S[0] ...

  2. BZOJ1487 [HNOI2009]无归岛 【仙人掌dp】

    题目链接 BZOJ1487 题解 就是一个简单的仙人掌最大权独立集 还是不会圆方树 老老实实地树形Dp + 环处理 #include<iostream> #include<cstdi ...

  3. codevs1690 开关灯

    1690 开关灯 USACO  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description YYX家门前的街上有N( ...

  4. mac 安装 python 配置||虚拟环境

    前篇:http://www.cnblogs.com/ostrich-sunshine/p/8747791.html 介绍了 Mac 下 python 的一些相关知识. 这篇介绍 python3 的安装 ...

  5. Linux 命令行下使用多行输入

    比较简单,建议实操,直接上图: 一行结束,直接敲回车换行.上一个例子,输入eof,终止多行输入:下一个例子,输入done,终止多行 ~~ 如果是参数太多,一行输入不完,可以通过 "空格\en ...

  6. Python之访问set

    dict的作用是建立一组 key 和一组 value 的映射关系,dict的key是不能重复的. 有的时候,我们只想要 dict 的 key,不关心 key 对应的 value,目的就是保证这个集合的 ...

  7. ckeditor自己用的配置文件config.js

    原文发布时间为:2011-01-17 -- 来源于本人的百度文章 [由搬家工具导入] CKEDITOR.editorConfig = function(config) {    // Define c ...

  8. 【原创】datalist repeater 控件的行鼠标单击 以及 滑过特效

    原文发布时间为:2009-05-06 -- 来源于本人的百度文章 [由搬家工具导入] 调用方法如：<tr id="<%# Container.ItemIndex+1 %>& ...

  9. js Regex match, exec, test & jquery plugin, visit the official website!

    http://plugins.jquery.com/?s=bootstrap 1. /reg/.test(strval) 2."strval".match(/reg/g), a r ...

  10. hdu 5972 Regular Number 字符串Shift-And算法 + bitset

    题目链接 题意 给定两个串\(S,T\),找出\(S\)中所有与\(T\)匹配的子串. 这里,\(T\)的每位上可以有若干(\(\leq 10\))种选择,匹配的含义是:对于\(S\)的子串的每一位, ...