AngularJS过滤器filter用法分析
本文实例讲述了AngularJS过滤器filter用法。分享给大家供大家参考，具体如下：
在开发中，经常会遇到这样的场景
如用户的性别分为“男”和“女”，在数据库中保存的值为1和0，用户在查看自己的性别时后端返回的值自然是1或0，前端要转换为“男”或“女”再显示出来；
如我要换个羽毛球拍，某猫上羽毛球拍的品牌多达数十种，我想单独查看YONEX这个品牌的羽毛球拍；
买完羽毛球拍我还想买一桶羽毛球，点击按销量排序展示商品；
以上三种场景分别对数据进行了转换／筛选／排序，总而言之就是对数据的格式化，AngularJS的filter就是用来做这个事的。
内置过滤器
AngularJS内置了很多过滤器，在HTML模板的绑定符号{{}}内通过｜来调用过滤器
如字母转换成大写：
$scope.name='wangmeijian'
{{name | uppercase}} // 输出 WANGMEIJIAN
数字转成千分位写法：
$scope.num = 12345678
{{num | number}} // 输出 12,345,678
日期格式化：
$scope.date=new Date()
{{date | date:'yy-MM-dd'}} // 输出 2015-11-19
数字格式化成货币：
$scope.num=987654321
{{num | currency:'¥'}} // 输出 ¥987,654,321.00
demo示例：http://runjs.cn/code/ztgq7fwg
稍微复杂一点的过滤器——‘filter'，可以返回给定数组的子集，它接收一个参数，这个参数可以是字符串、对象、函数
字符串：返回所有包含这个字符串的元素，想要返回不包含这个字符串的元素则在前面加！
demo：
{{['wang','mei','jian'] | filter:'a'}} // 返回包含字母a的元素 ['wang','jian']
对象：Angular会将待过滤对象的属性与这个对象中的同名属性进行比较，如果属性值是字符串会判断是否包含该字符串（注意这里是包含，并不需要完全相等）
demo：
{{ [
{
name: 'wangmeijian',
sex: 'boy'
},
{
name: 'bokeyuan',
sex: 'sex'
}
] | filter:{
sex: 'bo'
}
}}
// 输出 [{"name":"wangmeijian","sex":"boy"}]
函数：对每个元素都执行该函数，返回非假值的元素会出现在新的数组中并返回
demo：
$scope.getNumber = function(n){
return !isNaN(n);
}
{{ ['demo',2,3] | filter:getNumber}} // 输出 [2,3]
自定义过滤器
当内置函数不能满足你的业务需求时，就需要自定义一个过滤器，自定义过滤器返回一个函数，函数的参数就是HTML模板中|左侧的数据，它会自动传入过滤器中
比如需求是将一句话中的每个单词首字母变成大写
<html ng-app='app'>
<head>
<title>AngularJS过滤器filter入门</title>
<script type="text/javascript" src="http://cdn.bootcss.com/angular.js/1.5.0-beta.1/angular.js"></script>
</head>
<body ng-controller='myController'>
<p>{{ str | capitalize}}</p>
<!-- 输出 Hello, Welcome To Bokeyuan! -->
<script type="text/javascript">
var app = angular.module('app',[])
.controller('myController',['$scope', function($scope){
$scope.str = 'hello, welcome to bokeyuan!'
}])
.filter('capitalize', function(){
return function(str){
var arr = str.split(/\s+/);
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].substr(0,1).toUpperCase() + arr[i].slice(1);
};
return arr.join(" ")
}
})
</script>
</body>
</html>
需要注意的是，内置过滤器‘filter'的参数是函数时，会对数组的每个元素执行该函数，自定义过滤器是对数组对象执行它return的函数。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关推荐
-
详解AngularJS Filter（过滤器）用法
AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expr
-
AngularJS过滤器filter用法实例分析
本文实例讲述了AngularJS过滤器filter用法.分享给大家供大家参考,具体如下: 这节我们来看看angularjs的过滤器filter. 在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户.比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等.在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能,angularjs内部为我们提供了number等很多内置的filter.并且
-
详解Angularjs filter过滤器
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. Filter是用来格式化数据用的. Filter的基本原型( '' 类似于Linux中的管道模式): {{ expression filter }} Filter可
-
AngularJS过滤器filter用法总结
本文实例总结了AngularJS过滤器filter用法.分享给大家供大家参考,具体如下: 引言 filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输入的值,然后按照某个规则进行处理然后输出最后的结果,例如我们输入一个数字,然后我们需要得到货币形式的数据,这样我们就可以利用过滤器来实现,AngularJS中的过滤器是非常简单的,分为内置和自定义两种,下面小编就简单的给大家介绍一些. 内置过滤器 ng内置了一些过滤器,它们是:currency(货币)
-
Angularjs之filter过滤器(推荐)
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子. lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,78
-
详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }} //结果:
-
AngularJS中的过滤器filter用法完全解析
在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单 在HTML的模板绑定{{}}中,我们使用 | 来调用过滤器,比如,我们想让字符串全部大写字符显示: {{ name | uppercase }} 当然了,我们也可以在JavaScript中使用$filter服务来调用过滤器,还拿字符串大写来举例: app.controller('DemoController', ['$scope', '$filt
-
AngularJs学习第八篇 过滤器filter创建
demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constant("productsUrl", "http://localhost:/products") .controller("defaultCtrl", function ($scope, $http, productsUrl) { $http.get(productsUrl).success
-
AngularJS变量及过滤器Filter用法分析
本文实例讲述了AngularJS变量及过滤器Filter用法.分享给大家供大家参考,具体如下: 1. 关于部分变量的操作 设置变量: ng-init="hour=14" //设置hour变量在DOM中 使用data-ng-init 更好些 $scope.hour = 14; //设置hour变量在js中 使用变量: (1) 如果是在DOM 相关的 ng-*** 属性里 直接写变量名 如: <p ng-show="hour > 13">I am vi
-
AngularJS过滤器filter用法分析
本文实例讲述了AngularJS过滤器filter用法.分享给大家供大家参考,具体如下: 在开发中,经常会遇到这样的场景 如用户的性别分为"男"和"女",在数据库中保存的值为1和0,用户在查看自己的性别时后端返回的值自然是1或0,前端要转换为"男"或"女"再显示出来: 如我要换个羽毛球拍,某猫上羽毛球拍的品牌多达数十种,我想单独查看YONEX这个品牌的羽毛球拍: 买完羽毛球拍我还想买一桶羽毛球,点击按销量排序展示商品: 以上三
-
angularjs过滤器--filter与ng-repeat配合有奇效
index.html <!DOCTYPE html> <html> <head> <link href="bootstrap.min.css" rel="external nofollow" rel="stylesheet"> </head> <body ng-app="myApp" ng-controller="myCtrl"> &l
-
实例解析angularjs的filter过滤器
现在公司用ionic,就是基于angularjs封装了一些api用于webapp,最近用的angularjs的filter确实省了很多代码,现在总结一下! ng比较鸡肋的过滤器,这里就一笔带过吧!鸡汤类常用的filter后面上例子. lowercase(小写) {{ lastName | lowercase }} uppercase(大写) {{ lastName | uppercase }} number(格式化数字) number过滤器可以为一个数字加上千位分割,像这样,123,456,78
-
JavaWeb中过滤器Filter的用法详解
目录 过滤器Filter 处理顺序 使用场景 自定义过滤器 源码分析 FilterDef FilterMap 初始化过滤器 创建过滤器链 ApplicationFilterChain 执行过滤器链 过滤器Filter 过滤器通常对一些web资源进行拦截,做完一些处理器再交给下一个过滤器处理,直到所有的过滤器处理器,再调用servlet实例的service方法进行处理.过滤器可以对request进行处理也可以对response进行处理. 处理顺序 如果过滤器链顺序如上图所示,那么对request请