在开发中,经常会遇到这样的场景:
如用户的性别分为“男”和“女”,在数据库中保存的值为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
实例如下:
index.html
<html ng-app='app'> <head> <title>AngularJS过滤器filter入门</title> </head> <body ng-controller='myController'> <p>{{name}}转换成大写:{{name | uppercase}}</p> <p>12345678数字转成千分位写法:{{num | number}}</p> <p>日期格式化:{{date | date:'yy-MM-dd'}}</p> <p>{{987654321| currency:'¥'}}</p> </body> <script type="text/javascript" src="angular1.2.9.js" ></script> <script type="text/javascript" src="filter.js" ></script> </html>
filter.js
var app = angular.module('app',[]) .controller('myController',['$scope', function($scope){ $scope.name = 'abcdefg'; $scope.num = 12345678; $scope.date = new Date(); }])
运行效果:
稍微复杂一点的过滤器——‘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模板中|左侧的数据,它会自动传入过滤器中。
比如需求是将一句话中的每个单词首字母变成大写。
index02.html
<html ng-app='app'> <head> <title>AngularJS过滤器filter入门</title> </head> <body ng-controller='myController'> <p>{{ str | capitalize}}</p> <!-- 输出 Hello, Welcome To Iteye! --> </body> <script type="text/javascript" src="angular1.2.9.js" ></script> <script type="text/javascript" src="index02Filter.js" ></script> </html>
index02Filter.js
var app = angular.module('app',[]) .controller('myController',['$scope', function($scope){ $scope.str = 'hello, welcome to iteye!' }]) .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(" ") } })
运行效果:
需要注意的是,内置过滤器‘filter’的参数是函数时,会对数组的每个元素执行该函数,自定义过滤器是对数组对象执行它return的函数。
三.实际应用
在实际应用中,会存在对金额进行取两位小数且做千位分隔符的处理,可以将其做成服务在控制器中调用,也可封装成一个过滤器。如下所示:
index03.html
<html ng-app='app'> <head> <title>AngularJS过滤器filter入门</title> </head> <body ng-controller='myController'> <p ng-bind='formatNum'></p> <p>{{ num | bitSeparatorFilter}}</p> </body> <script type="text/javascript" src="angular1.2.9.js" ></script> <script type="text/javascript" src="index03Filter.js" ></script> </html>
index03Filter.js
var app = angular.module('app',[]) .factory('floatUtil', function() { return { /** * 将浮点数num转换为指定位数places的字符串,位数不够时会四舍五入 * */ toFixed: function (num, places) { var times = Math.pow(10, places); var des = num * times + 0.5; var numStr = (parseInt(des, 10) / times) + ''; var decimalPlaces = this.getDecimalPlaces(numStr); //小数位数 if (decimalPlaces > 0) { numStr = this.addZero(numStr, places - decimalPlaces); } else { //整型 numStr = this.addZero(numStr + '.', places); } return numStr; }, /** * 为字符串结尾添加指定个零 * */ addZero: function (numStr, zeroNum) { var zeroStr = ''; zeroNum = zeroNum < 0 ? 0 : zeroNum; for (var i = 0; i < zeroNum; i++) { zeroStr += '0'; } return numStr + zeroStr; }, /** * 获取小数的位数 * */ getDecimalPlaces: function (num) { var numStr = num.toString(); if (numStr.indexOf('.') > -1) { return numStr.split('.')[1].length; } return 0; } }; }) .factory('baseUtil', function(floatUtil) { /** * 千位分隔符 * */ function bitSeparator(num) { if (num === 0) { return '0.00'; } if (!num) { return num; } var numStr = floatUtil.toFixed(num, 2); var decimalStr = ''; if (numStr.indexOf('.') != -1) {//有小数位 var numArr = numStr.split('.'); numStr = numArr[0]; decimalStr = '.' + numArr[1]; } return numStr.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + decimalStr; } return { bitSeparator: bitSeparator }; }) .controller('myController',['$scope', 'baseUtil', function($scope, baseUtil){ $scope.num = '1352626.32'; $scope.formatNum = baseUtil.bitSeparator($scope.num); }]) .filter('bitSeparatorFilter', function(baseUtil){ return function(str){ return baseUtil.bitSeparator(str); }; })
运行效果:
相关推荐
<title>AngularJS过滤器filter入门 ***"> <p>{{str|capitalize}} <!-- 输出Hello,WelcomeToBokeyuan! --> var app = angular.module('app',[]) .controller('myController',['$scope',function($scope){ $scope....
AngularJS过滤器(filter)是AngularJS框架中的一个重要特性,用于转换和格式化数据,以适应用户界面的显示需求。过滤器可以在视图层(View)中直接使用,也可以在控制器(Controller)或表达式中应用。它们允许...
AngularJS过滤器是AngularJS框架中用于数据转换和格式化的一种功能强大的工具,它们能够接收原始数据,并根据预设的规则进行处理,然后输出格式化后的结果。在AngularJS中,过滤器通常与表达式一起使用,通过管道符 ...
在介绍AngularJS过滤器-filter与ng-repeat的配合使用时,我们首先需要了解这两个指令在AngularJS框架中所扮演的角色。AngularJS是一个开源的前端框架,由Google支持,广泛用于开发动态Web应用程序。它通过引入双向...
AngularJS中过滤器的作用是格式化需要展示给用户的数据。在AngularJS的HTML模板绑定中,我们通过在绑定符号{{}}内使用|符号调用过滤器。例如,{{value|lowercase}}这样的表达式可以将值转换成小写。除了在HTML模板中...
详解 AngularJS 过滤器的用法 AngularJS 过滤器是用来格式化需要展现给用户的数据的强大工具。 AngularJS 提供了许多内置的有用的过滤器,同时也允许开发者自己编写过滤器。在 HTML 模板中,可以通过使用 {{ }} ...
下面将详细介绍一些常用的AngularJS过滤器及其用法。 1. `lowercase` 和 `uppercase` 过滤器: - `lowercase` 过滤器用于将字符串转换为小写,如 `{{ lastName | lowercase }}`。 - `uppercase` 过滤器则用于将...
总之,AngularJS过滤器是数据呈现和处理的关键工具,它们帮助开发者将原始数据转化为适合用户阅读的形式,同时也方便在业务逻辑中进行数据筛选和转换。熟练掌握过滤器的使用,能极大地提升AngularJS应用的用户体验和...
AngularJS的Filter过滤器是其数据绑定功能的重要组成部分,它允许开发者对数据进行转换和格式化,以便在视图中展示。以下是对AngularJS Filter过滤器的详细解析: 1. **Lowercase和Uppercase**: 这两个过滤器分别...
AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个...
AngularJS 过滤器将句子和特别是团队名称大写。 分叉和大量修改 安装(尚未发布) 您可以使用安装过滤器: $ bower install yk.filters.capitalize 然后你必须将它包含在你的 HTML 中: < script src =" ...
AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个...
**AngularJS 过滤器详解** AngularJS 是一个强大的 JavaScript 框架,它通过数据绑定和依赖注入简化了前端开发。在 AngularJS 中,过滤器(Filters)是一种功能强大的工具,它们可以用来转换和格式化视图中的数据,...
AngularJS内建了多种过滤器,同时也支持自定义过滤器,使得我们可以根据项目的特定需求进行定制。 ### 内置过滤器 AngularJS内置了多种过滤器,例如: 1. **`number`** - 用于格式化数字,可以设定小数点后的位数...
本文将深入探讨AngularJS过滤器的使用方法,以及在特定场景下的应用策略。 过滤器的本质是一个接收输入并返回处理后的输出的方法。在我们的示例中,有一个名为`yunzhiComputer`的过滤器,它接收用户和计算机名称...
在本项目“AngularJS-过滤器”中,我们将深入探讨AngularJS过滤器的实现及其用法。 1. **定义与使用过滤器** 在AngularJS中,过滤器可以通过两种方式使用:在HTML模板中和在JavaScript控制器中。在HTML中,我们...