首页 / ANGULAR / 详解AngularJS过滤器的使用_AngularJS

详解AngularJS过滤器的使用_AngularJS

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解AngularJS过滤器的使用_AngularJS，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3581字，纯文字阅读大概需要6分钟。

内容图文

AnularJS的过滤器用来格式化需要展示给用户的数据，有很多实用的内置过滤器，也可以自己编写。

在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串
转换成大写，可以对字符串中的每个字符都单独进行转换操作，也可以使用过滤器：

{{ name | uppercase }}
在JavaScript代码中可以通过$filter来调用过滤器。例如，在JavaScript代码中使用lowercase
过滤器：

以HTML的形式使用过滤器时，如果需要传递参数给过滤器，只要在过滤器名字后面加冒号
即可。如果有多个参数，可以在每个参数后面都加入冒号。例如，数值过滤器可以限制小数点后
的位数，在过滤器后写上:2可以将2作为参数传给过滤器：

1. currency
currecy过滤器可以将一个数值格式化为货币格式。用{{ 123 | currency }}来将123转化
成货币格式。
currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号，
但是也可以自定义货币符号。
2. date
date过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式，如果没有
指定使用任何格式，默认会采用mediumDate格式，下面的例子中展示了这个格式。
下面是内置的支持本地化的日期格式：

年份格式化
四位年份：{{ today | date:'yyyy' }}
两位年份：{{ today | date:'yy' }}
一位年份：{{ today | date:'y' }}
月份格式化
英文月份：{{ today | date:'MMMM' }}
英文月份简写：{{ today | date:'MMM' }}
数字月份：{{ today |date:'MM' }}
一年中的第几个月份：{{ today |date:'M' }}
日期格式化
数字日期：{{ today|date:'dd' }}
一个月中的第几天：{{ today | date:'d' }}
英文星期：{{ today | date:'EEEE' }}
英文星期简写：{{ today | date:'EEE' }}
小时格式化
24小时制数字小时：{{today|date:'HH'}}
一天中的第几个小时：{{today|date:'H'}}
12小时制数字小时：{{today|date:'hh'}}
上午或下午的第几个小时：{{today|date:'h'}}
分钟格式化
数字分钟数：{{ today | date:'mm' }}
一个小时中的第几分钟：{{ today | date:'m' }}
秒数格式化
数字秒数：{{ today | date:'ss' }}
一分钟内的第几秒：{{ today | date:'s' }}
毫秒数：{{ today | date:'.sss' }}
下面是一些自定义日期格式的示例：

filter

filter过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回。

例如，用下面的过滤器可以选择所有包含字母e的单词：

如果要过滤对象，可以使用上面提到的对象过滤器。例如，如果有一个由people对象组成的
数组，每个对象都含有他们最喜欢吃的食物的列表，那么可以用下面的形式进行过滤：

也可以用自定义函数进行过滤（在这个例子中函数定义在$scope上）：

isCapitalized函数的功能是根据首字母是否为大写返回true或false，具体如下所示：

自定义过滤器

首先，创建一个模块用以在应用中进行引用

现在，如果想将一个句子的首字母转换成大写形式，可以用过滤器先将整个句子都转换成小
写，再把首字母转换成大写：

以上就是AngularJS过滤器的使用方法，希望对大家的学习有所帮助。

内容总结

以上是互联网集市为您收集整理的详解AngularJS过滤器的使用_AngularJS全部内容，希望文章能够帮你解决详解AngularJS过滤器的使用_AngularJS所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/311698.html

来源：【匿名】

更多 ►

【详解AngularJS过滤器的使用_AngularJS】教程文章相关的互联网学习教程文章

AngularJS1.X学习笔记7-过滤器【代码】【图】

最近参加笔试被虐成狗了，感觉自己的算法太弱了。但是还是先花点事件将这个AngularJS学习完。今天学习filter一、内置过滤器　　（1）过滤单个数据值<!DOCTYPE html><html lang="en" ng-app="myApp"><head><meta charset="UTF-8"><title>内置过滤器-过滤单个数据值</title></head><body ng-controller="tableCtrl"><h1>今天是：{{now|date:"dd MMMM yyyy"}}</h1><table width="100%"><tr><td>name</td><td>cat</td><td>price</td><t...

angular过滤器 -- 截取字符串【代码】【图】

使用angular定义用于截取特定长度的过滤器，并使用自定义符号（包括“...”）在末尾进行替换<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>stringSub</title></head><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><body ng-app="myApp" ng-controller="myController"><span style="background: #ddd;border-radius: 4px;padding:2px;">{{arr | cutTxt:55:"......

【AngularJS学习笔记】01 指令、服务和过滤器【代码】

AngularJS 指令是扩展的 HTML 属性，带有前缀 ng-。比如：ng-app 指令初始化一个 AngularJS 应用程序。注意ng-app一般为空，如果值不为空，就得加这样一句代码var app = angular.module(‘名字‘, []);ng-init 指令初始化应用程序数据。这个在之前已经说过了，下面讲一下之前没讲到的。ng-repeat指令与ng-options指令<div ng-app="" ng-init="names=[ {name:‘Jani‘,country:‘N...

angular入门--自定义过滤器【代码】

<html ng-app=‘app1‘><head><meta name="generator"content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /><title></title><script src=‘E:\global\js\angular.min.js‘> </script></head><body><div ng-controller="c1"><input value="get the filter value" type=‘button‘ ng-click="getFilter()" /><div ng-bind="name " ></div><div ng-bind="name | f1:‘test pa...

AngularJS（六）——过滤器

过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，同时也提供了方便的途径可以自己创建过滤器。在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。将字符串转换成大写：{{name | uppercase }}内置过滤器：1. currency currecy 过滤器可以将一个数值格式化为货币格式。用 {{ 123 | currency }} 来将123转化成货币格式。2. date date 过滤器可以将日期格式化成需要的格式。Angula...

angularjs-currency 过滤器

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href=""></head><body><div ng-app="myApp" ng-controller="costCtrl"><input type="number" ng-model="quantity"><input type="number" ng-model="price"><p>总价:{{(quantity * price) | currency}}</p></div></body><script src="http://cdn.static.runoob.com/libs/angular.js...

AngularJS入门教程之过滤器用法示例【图】

本文实例讲述了AngularJS过滤器用法。分享给大家供大家参考，具体如下：在前面几节里我们已经接触过AngularJS的表达式，表达式的作用是向视图中输出字面量或$scope对象中的属性值。在输出之前我们可以通过过滤器来格式化输出的数据。过滤器的使用非常简单，我们看一下下面的代码： <!DOCTYPE html> <html ng-app> <head lang="en"><meta charset="UTF-8"><script type="text/javascript" src="angular-1.3.0.14/angular.js"></sc...

AngularJS控制器怎么使用？angularjs的控制器和过滤器的介绍

本篇文章介绍了关于angularjs控制器的使用介绍，还有关于angularjs过滤器的一些使用介绍，下面就让我们一起来看看这篇文章吧AngularJS控制器AngularJS 控制器控制 AngularJS 应用程序的数据。 AngularJS 控制器是常规的JavaScript对象<h2>AngularJS 控制器属性</h2><p ng-app="" ng-controller="MyController"><p>姓名：<input type="text" ng-model="person.name"></p><p>性别： <input type="text" ng-model="person.sex"></p><...

angularjs过滤器怎么使用？angularjs过滤器使用方法介绍

本篇文章主要的讲述了关于angularjs过滤器的使用方法的纤细解释，里面还有更多的angularjs过滤器的格式化样式。接下来就让我们一起来爱看这篇文章吧。我们先来谈谈angularjs过滤器的使用：AnularJS的过滤器用来格式化需要展示给用户的数据，有很多实用的内置过滤器，也可以自己编写。在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串转换成大写，可以对字符串中的每个字符都单独进行转换操作，也可...

angularjs过滤器你会使用吗？我们来看angularjs过滤器的详细解释【图】

angularjs中的过滤器是我们经常使用的，但是对它的理解只在能能够使用的层面上。我们这次深入地学习一下angularjs的过滤器的相关知识吧。一起来看这篇文章吧在Controller中使用过滤器在DOM中使用过滤器的弊端我们在使用过滤器的时候，更多的是在DOM中使用管道符(|)来进行过滤，因为简单嘛。但是在它简单的背后是牺牲了性能，在DOM中的过滤器会造成额外的内部开销，所以在Controller中使用过滤器会更快一些。但是有人就会说了：我并...

使用Angularjs过滤器如何实现动态搜索【图】

这篇文章主要介绍了Angularjs过滤器实现动态搜索与排序功能,涉及AngularJS过滤器相关搜索、查询、排序操作技巧,需要的朋友可以参考下本文实例讲述了Angularjs过滤器实现动态搜索与排序功能。分享给大家供大家参考，具体如下：利用angularjs实现动态的插入以及利用过滤器进行数据的搜索以及排序.<!DOCTYPE html> <html lang="en" ng-app="myApp"> <head><meta charset="UTF-8"><title>www.gxlcms.com AngularJS过滤器测试</title> <...

Angular过滤器做出数据大小写转换

这次给大家带来Angular过滤器做出数据大小写转换，Angular过滤器做出数据大小写转换的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>angular过滤器uppercase/lowercase字母大小写转换</title> <script src="angular.min.js"></script> </head> <body ng-controller="my"> <span ng-bind="name"></span> <span ng-bind="name | uppercase"></span>...

怎样操作AngularJS使用Filter自定义过滤器控制ng-repeat去重【图】

这次给大家带来怎样操作AngularJS使用Filter自定义过滤器控制ng-repeat去重，操作AngularJS使用Filter自定义过滤器控制ng-repeat去重的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ng-repeat去除重复</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <p ng-app="myApp" ng-controller="myCtrl">...

怎样使用AngularJS自定义过滤器用法

这次给大家带来怎样使用AngularJS自定义过滤器用法，使用AngularJS自定义过滤器用法的注意事项有哪些，下面就是实战案例，一起来看一下。过滤器结构{{带过滤数据 | 过滤器名：参数1：参数2：参数3.....}} app.filter(过滤器名, function () {return function (待过滤数据, 参数....) {......return 已过滤数据;}示例一：是否包含<!doctype html> <html ng-app="myApp"> <head><meta http-equiv="Content-Type" content="text/html;...

Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例【图】

这篇文章主要介绍了Angular使用过滤器uppercase/lowercase实现字母大小写转换功能,涉及AngularJS过滤器针对字符串转换的简单使用技巧,需要的朋友可以参考下本文实例讲述了Angular使用过滤器uppercase/lowercase实现字母大小写转换功能。分享给大家供大家参考，具体如下：<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.gxlcms.com angular过滤器uppercase/lowercase字母大小写转换</title> <scr...

ANGULAR - 技术教程分类

Angular 2 教程 Angular 2 架构 Angular 2 数据显示 Angular 2 用户输入 Angular 2 表单 Angular 2 模板语法 angular 全部

ANGULAR - 最热教程

在Angular中如何实现查询天气预报 AngularJS服务service用法总结 Angular.JS中指令ng-if的注意事项小结 AngularJS 异步解决实现方法使用AngularJS和PHP的Laravel实现单页评...AngularJS控制器继承自另一控制器 spring+angular实现导出excel的实现代码关于AngularJS中ng-repeat不更新视图的...在Angular5中如何调用第三方js插件（详...Angular入口组件与声明式组件使用详解

首页 / ANGULAR / 详解AngularJS过滤器的使用_AngularJS

详解AngularJS过滤器的使用_AngularJS

内容导读

内容图文

内容总结

内容备注

内容手机端

【详解AngularJS过滤器的使用_AngularJS】教程文章相关的互联网学习教程文章

ANGULAR - 技术教程分类

ANGULAR - 最新教程

ANGULAR - 最热教程