您的位置： &
过滤器的最新研究进展及应用
优质期刊推荐AngularJS中的过滤器使用详解
投稿：goldensun
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了AngularJS中的过滤器使用详解,过滤器是AngularJS中处理文本的一个非常有用的功能,需要的朋友可以参考下
过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。
&小写过滤器
添加小写的过滤器，使用管道符的表达式。在这里添加小写过滤器，以小写字母打印学生姓名。
Enter first name:&input type="text" ng-model="student.firstName"&
Enter last name: &input type="text" ng-model="student.lastName"&
Name in Upper Case: {{student.fullName() | lowercase}}
货币滤波器
加币过滤器使用管道符返回数的表达式。在这里，我们添加了过滤器，货币使用货币格式的打印费用。
Enter fees: &input type="text" ng-model="student.fees"&
fees: {{student.fees | currency}}
过滤器的过滤器
要仅显示所需的主题，我们使用subjectName作为过滤器。
Enter subject: &input type="text" ng-model="subjectName"&
&li ng-repeat="subject in student.subjects | filter: subjectName"&
{{ subject.name + ', marks:' + subject.marks }}
排序过滤器
要通过标记排序主题，我们使用orderBy标记。
&li ng-repeat="subject in student.subjects | orderBy:'marks'"&
{{ subject.name + ', marks:' + subject.marks }}
下面的例子将展示上述所有的过滤器。
testAngularJS.html
&title&Angular JS Filters&/title&
&h2&AngularJS Sample Application&/h2&
&div ng-app="" ng-controller="studentController"&
&table border="0"&
&tr&&td&Enter first name:&/td&&td&&input type="text" ng-model="student.firstName"&&/td&&/tr&
&tr&&td&Enter last name: &/td&&td&&input type="text" ng-model="student.lastName"&&/td&&/tr&
&tr&&td&Enter fees: &/td&&td&&input type="text" ng-model="student.fees"&&/td&&/tr&
&tr&&td&Enter subject: &/td&&td&&input type="text" ng-model="subjectName"&&/td&&/tr&
&table border="0"&
&tr&&td&Name in Upper Case: &/td&&td&{{student.fullName() | uppercase}}&/td&&/tr&
&tr&&td&Name in Lower Case: &/td&&td&{{student.fullName() | lowercase}}&/td&&/tr&
&tr&&td&fees: &/td&&td&{{student.fees | currency}}&/td&&/tr&
&tr&&td&Subject:&/td&&td&
&li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'"&
{{ subject.name + ', marks:' + subject.marks }}
&/td&&/tr&
function studentController($scope) {
$scope.student = {
firstName: "Mahesh",
lastName: "Parashar",
subjects:[
{name:'Physics',marks:70},
{name:'Chemistry',marks:80},
{name:'Math',marks:65}
fullName: function() {
var studentO
studentObject = $scope.
return studentObject.firstName + " " + studentObject.lastN
&script src="/ajax/libs/angularjs/1.2.15/angular.min.js"&&/script&
在Web浏览器打开textAngularJS.html，看到以下结果：
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具前面了解了AngularJS的使用方法，这里就简单的写个小程序，实现查询过滤以及排序的功能。
本程序中可以了解到：
　　1 angularjs的过滤器
　　2 ng-repeat的使用方法
　　3 控制器的使用
　　4 数据的绑定
　　程序设计分析
　　首先，如果要是先查询过滤，就要使用到AngularJS中的&过滤器filter&了。
　　直接在表达式的后面使用管道命令符 | ，按照下面的写法就可以达到一个过滤的效果：
{{ persons | filter:query }}
　　通过使用filter实现过滤操作，query是查询过滤时输入的字符串。
　　类似地，使用orderBy就可以实现排序的功能：
{{ persons | filter:query | orderBy:order }}
　　上面的查询以及排序涉及到两个变量，query和order。在这里直接使用ng-model实现数据的绑定即可：
Search:&input ng-model="query"&
Sort by:&select ng-model="order"&
&option value="name"&name&/option&
&option value="age"&age&/option&
　　AngularJS是一门基于DOM的框架语言，因此不需要实现任何的监听器以及事件触发器，当query所在的输入框发生任何改变时，就会触发输入框与下面的表达式展现的双向刷新！
　　相比于其他的一些框架，是基于字符串通过DOM节点innerHTML添加到DOM中，AngularJS的实现方式加快了模型与视图的展现。并且减少了大量不必要的监听器啊触发器啊之类的代码的编写，真正实现了类似spring的效果~
　　数据的展现，可以通过ng-repeat实现。当网页解析到ng-repeat的时候，会为每一个数组中的元素都克隆一份标签，进行编译解析。
　　　　　　　&ul class="persons"&
&li ng-repeat="person in persons | filter:query | orderBy:order"&
{{person.name}}
{{person.age}}
　　剩下的工作就是需要在script中进行perons数组的初始化：
&div ng-controller="ctl"&
&script type="text/javascript"&
function ctl($scope){
$scope.persons = [
{"name":"xingoo","age":25},
{"name":"zhangsan","age":18},
{"name":"lisi","age":20},
{"name":"wangwu","age":30}
$scope.order = "age";
　　代码以及结果
　　最后贴上全部的代码：
&!doctype html&
&html ng-app&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&script src="/libs/angular.js/1.2.16/angular.min.js"&&/script&
&div ng-controller="ctl"&
Search:&input ng-model="query"&
Sort by:&select ng-model="order"&
&option value="name"&name&/option&
&option value="age"&age&/option&
&ul class="persons"&
&li ng-repeat="person in persons | filter:query | orderBy:order"&
{{person.name}}
{{person.age}}
&script type="text/javascript"&
function ctl($scope){
$scope.persons = [
{"name":"xingoo","age":25},
{"name":"zhangsan","age":18},
{"name":"lisi","age":20},
{"name":"wangwu","age":30}
$scope.order = "age";
　　使用结果：
　　在默认情况下，使用age进行排序：
　　通过选择则可以使用name排序
　　再输入字符的时候，会自动过查询过滤掉一些选项
阅读(...) 评论()扫一扫关注官方微信angularJs中的filter过滤器的使用方法-js教程-网页制作-壹聚教程网angularJs中的filter过滤器的使用方法
最近在学习angularJs了，对于angularJs了解的一些知识整理文章供各位参考，下面我们来看一篇angularJs中的filter过滤器的使用教程，希望对各位有用。
&filter过滤器是angular中一个很实用的工具，通过它我们可以很简单的对我们的数据进行格式化，看例子：表达式中添加过滤器过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。.(（下面的两个实例，我们将使用前面章节中提到的 person 控制器）)uppercase 过滤器将字符串格式化为大写：AngularJS 实例&div&ng-app=&myApp&&ng-controller=&personCtrl&&
&p&姓名为&{{&lastName&|&uppercase&}}&/p&
&/div&尝试一下 & lowercase 过滤器将字符串格式化为小写：AngularJS 实例&div&ng-app=&myApp&&ng-controller=&personCtrl&&
&p&姓名为&{{&lastName&|&lowercase&}}&/p&
&/div&尝试一下 & --------------------------------------------------------------------------------currency 过滤器currency 过滤器将数字格式化为货币格式：AngularJS 实例&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&尝试一下 & --------------------------------------------------------------------------------向指令添加过滤器过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中。orderBy 过滤器根据表达式排列数组：AngularJS 实例&div&ng-app=&myApp&&ng-controller=&namesCtrl&&
&&&li&ng-repeat=&x&in&names&|&orderBy:'country'&&
&&&&{{&x.name&+&',&'&+&x.country&}}
&div&尝试一下 & --------------------------------------------------------------------------------过滤输入输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。filter 过滤器从数组中选择一个子集：AngularJS 实例&div&ng-app=&myApp&&ng-controller=&namesCtrl&&
&p&&input&type=&text&&ng-model=&test&&&/p&
&&&li&ng-repeat=&x&in&names&|&filter:test&|&orderBy:'country'&&
&&&&{{&(x.name&|&uppercase)&+&',&'&+&x.country&}}
&/div&例子&!DOCTYPE&html&
&&meta&charset=&UTF-8&&
&&title&Document&/title&
&&link&href=&/bootstrap/3.3.5/css/bootstrap.min.css&&rel=&stylesheet&&
&&script&src=&/angular.js/1.4.4/angular.js&&&/script&
&angular.module('demo',[])
&.filter('spillOver',function(){
&&return&function(item,len){
&&&var&len&=&len||5;
&&&item&=&item.toString();
&&&if(item.length&len){
&&&&return&item.(0,len)&+&'……';
&&&return&
&&/script&
&body&ng-app='demo'&
&&&p&{{0&|&date:'yyyy-MM-dd&HH:mm:ss'}}&/p&
&&&p&{{'每日每夜'&|&spillOver:'3'}}&/p&
&&&p&{{'没有人还在这里'|spillOver:'6'}}&/p&
&&&p&{{'没有人还在这里'|spillOver}}&/p&
&/html&运行效果如下：&&演示中的date是angular的内置filter，spillOver是我自定义的filter，具体的代码可以参见js部分，还是很灵活的，默认的第一个参数就是管道符号“|”左边的字符串，而后面的参数可以通过自定义filter:传入。补充AngularJS的内置过滤器先来看看这些内置过滤器使用方法:一个过滤器，不带参数的情况{{expression | filter}}一个过滤器，带参数的情况{{expression | filter:arguments}}一个过滤器，带多个参数的情况{{expression | filter: arg1: arg2: ...}}多个过滤器，不带参数的情况{{expression | filter1 | filter2 | ...}}下面我们分别使用以下AngularJS的内置过滤器currencycurrency允许我们设置自己的货币符号，默认情况下会采用客户端所处区域的货币符号。可以这样使用：{{ 3600 | currency: &$￥&}}返回结果为$￥123.00&numbernumber过滤器将数字格式化成文本，它的参数是可选的，用来控制小数点后的截取位数如果传入的是一个非数字字符，会返回空字符串可以这样使用：{{ 3600 | number:2}}返回结果为：3,600.00&lowercaselowercase将字符串转换为小写可以这样使用：{{ &HEllo& | lowercase}}返回结果为：hello&uppercaseuppercase将字符串转换为大写可以这样使用：{{ &HEllo& | uppercase}}返回结果为：HELLO&jsonjson过滤器可以将一个JSON或者JavaScript对象转换成字符串。这个过滤器对调试相当有用可以这样使用：{{ {&name&:&dreamapple&,&language&:&AngularJS&} | json}}返回结果为：{ &name&: &dreamapple&, &language&: &AngularJS& }&datedate过滤器将日期过滤成你想要的格式，这个实在是很好的过滤器。这个过滤器用法很多我这里列举几种常用的{{ today | date: &yyyy - mm - dd&}}结果为：2015 - 15 - 13{{ today | date: &yyyy - mm - dd HH:mm::ss&}}结果为：2015 - 18 - 13 20:18::38[online code](2015 - 18 - 13 20:18::38)
上一页： &&&&&下一页：相关内容