Angular学习笔记之angular的$filter服务浅析

首先，介绍下$filter服务：

1、$filter是用来进行数据格式化的专用服务；

2、AngularJS内置了currency、date、filter、json、limitTo、lowercase、uppercase、number、orderBy这8个filter；

3、filter可以嵌套使用，用管道符号"|"来分隔（有点像linux）；

4、filter可以传递参数；

5、用户可自定义filter。

介绍下内置filter：

currency：用于格式化货币，如在数值前自动加上"$"或"￥"之类的。

date：格式化日期，它会提供丰富的日期格式。

json：完成json格式化。

number：如转成两位小数等。

orderBy：进行排序。

filter的简单使用：

{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy h:mma" }}
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
{{ 30 | currency }}

输出：

May 3, 2011
05/03/2011 6:39AM
2011-05-03 06:39:08
$30.00

自定义filter：

eg：

var myModule = angular.module('myModule',[]);
myModule.filter('myFilter',function(){
return function(item){
return 'Hi,'+item;
}
});

使用： {{ 'JennyLin' | myFilter }}

以上内容比较详细的给大家介绍了angular的$filter服务，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

赞 (0)

相关推荐

  • 详解AngularJS中的filter过滤器用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }} //结果:

  • AngularJS ng-style中使用filter

    问题原因: Angular中使用boostrap的progress在ie8下有问题, 不能显示出进度 错误的写法: <div class="progress"> <div class="bar bar-success" style="width:{{user.used | percent:user.total}}"></div></div> 这可能是因为在刚开始渲染页面时, user的值还没有获取到

  • AngularJS过滤器filter用法实例分析

    本文实例讲述了AngularJS过滤器filter用法.分享给大家供大家参考,具体如下: 这节我们来看看angularjs的过滤器filter. 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户.比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等.在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter.并且

  • 详解AngularJS Filter（过滤器）用法

    详解AngularJS Filter（过滤器）用法

    AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expr

  • AngularJS中的过滤器filter用法完全解析

    AngularJS中的过滤器filter用法完全解析

    在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单 在HTML的模板绑定{{}}中,我们使用 | 来调用过滤器,比如,我们想让字符串全部大写字符显示: {{ name | uppercase }} 当然了,我们也可以在JavaScript中使用$filter服务来调用过滤器,还拿字符串大写来举例: app.controller('DemoController', ['$scope', '$filt

  • 浅析AngularJS Filter用法

    系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧 Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): 复制代码 代码如下: {{ expression | filter }} Filter可以被链式

  • Angularjs中如何使用filterFilter函数过滤

    AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东.AngularJS中有一个filterFilter函数用来对集合过滤,非常方便. 源代码大致如下: function filterFilter(){ return function(aray, expression comparator){ if(!isArray(array)) return array; var comparatorType = typeof(co

  • Angular学习笔记之angular的$filter服务浅析

    首先,介绍下$filter服务: 1.$filter是用来进行数据格式化的专用服务: 2.AngularJS内置了currency.date.filter.json.limitTo.lowercase.uppercase.number.orderBy这8个filter: 3.filter可以嵌套使用,用管道符号"|"来分隔(有点像linux): 4.filter可以传递参数: 5.用户可自定义filter. 介绍下内置filter: currency:用于格式化货币,如在数值前自动加上

  • Angular学习笔记之集成三方UI框架、控件的示例

    本文介绍了Angular学习笔记之集成三方UI框架.控件的示例,分享给大家,具体如下: 安装 Material UI 方法: Material 官网:https://material.angular.io step 1: npm install --save @angular/material @angular/cdk step 2: npm install --save @angular/animations step 3: angular.cli ../node_modules/@angul

  • Angular2学习笔记之数据绑定的示例代码

    Angular2学习笔记之数据绑定的示例代码

    简介 使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1> 使用方括号将HTML标签的一个属性值绑定到一个表达式上 <img [src]="imgUrl" alt=""> 使用小括号将组件控制器的一个方法绑定到模版上面的一个事件的处理器上 <button (click)=&

  • Angular.js自定义指令学习笔记实例

    本文给大家分享angular.js学习笔记之自定义指令实例代码讲解,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AngularDirective</title> <script src="http://cdn.bootcss.com/angular.js/1.4.6

  • Angular 5.x 学习笔记之Router(路由)应用

    Angular 5.x 学习笔记之Router(路由)应用

    序言: Angular APP 视图之间的跳转,依赖于 Router (路由),这一章,我们来讲述 Router 的应用 实例讲解 运行结果如下. 设置了3个导航栏, Home. About.Dashboard. 点击不同的导航栏,跳转到相应的页面: 创建3个 component ng g c home ng g c about ng g c dashboard 路由与配置 (1)**引入 Angular Router ** 当用到 Angular Router 时,需要引入 RouterMod

  • 前端框架学习总结之Angular、React与Vue的比较详解

    近几年前端的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React,Vue.js,Angular2等: 3.开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术: 4.前端开发范围的扩展,如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,Reac

  • JavaWeb学习笔记之Filter和Listener

    Filter:过滤器 过滤器:当访问服务器的资源时,过滤器可以将请求拦截下来,完成一些特殊的功能.一般用于完成通用的操作.如:登录验证.统一编码处理.敏感字符过滤... 过滤器相当于浏览器与 Web 资源之间的一道过滤网,在访问资源之前通过一系列的过滤器对请求进行修改.判断以及拦截等,也可以对响应进行修改.判断以及拦截等. 执行流程: 客户端发出请求,先经过过滤器, 如果过滤器放行,那么才能到servlet 如果有多个过滤器, 那么他们会按照注册的映射顺序 来 排队. 只要有一个过滤器, 不放行

  • SpringCloud学习笔记之OpenFeign进行服务调用

    SpringCloud学习笔记之OpenFeign进行服务调用

    目录 前言 1.OpenFeign 1.1.OpenFeign概述 1.2.OpenFeign的使用步骤 1.3.超时控制 1.3.1.是什么? 1.3.2.修改代码设置超时错误 1.3.3.进行超时配置 1.4.日志打印 1.4.1.是什么? 1.4.2.日志级别 1.4.3.如何开启日志打印 总结 前言 Feign是一个声明式的Web服务客户端,是面向接口编程的.也就是说使用Feign,只需要创建一个接口并使用注解方式配置它,就可以完成对微服务提供方的接口绑定. 在使用RestTemplat

  • SpringCloud hystrix服务降级学习笔记

    目录 一.Hystrix简介 1.Hystrix是什么 2.Hystrix能干什么 二.服务熔断 1.服务熔断简介 2.配置pom.xml 3.配置application.yaml 4.修改Controller 5.修改启动类 6.效果图 三.服务降级 1.什么是服务降级 2.DeptClientFailBackFactory类 3.添加注解 4.修改application.yaml 5.效果图 四.DashBorder 1.新建一个module 2.pom.xml配置 3.配置applicat

  • angularjs学习笔记之三大模块（modal，controller，view）

    今天主要跟大家详细讲解一下angularjs的三大模块: modal,controller,view. 首先跟大家说一下这三个模块之间的关系. 1.数据模型(modal)主要提供数据.它不会和视图(view)直接操作. 2.controller保存modal提供的数据,与视图进行操作. 3.view是视图,也就是页面展示. 4.总而言之,controller负责数据和视图之间的通信,就是两者的接口人.他们分工明确,实现了模块化. 一.如何使用数据模型(modal)? 讲到数据模型,我们再来看一下

随机推荐