`

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

实例如下:

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);
		};
	})

运行效果:



参考文章:http://www.cnblogs.com/wangmeijian/p/4979452.html

  • 大小: 92.5 KB
  • 大小: 1.2 KB
  • 大小: 7.2 KB
  • 大小: 1.5 KB
分享到:
评论

相关推荐

    AngularJS过滤器filter用法分析

    &lt;title&gt;AngularJS过滤器filter入门 ***"&gt; &lt;p&gt;{{str|capitalize}} &lt;!-- 输出Hello,WelcomeToBokeyuan! --&gt; var app = angular.module('app',[]) .controller('myController',['$scope',function($scope){ $scope....

    AngularJS过滤器filter用法实例分析

    AngularJS过滤器(filter)是AngularJS框架中的一个重要特性,用于转换和格式化数据,以适应用户界面的显示需求。过滤器可以在视图层(View)中直接使用,也可以在控制器(Controller)或表达式中应用。它们允许...

    AngularJS过滤器filter用法总结

    AngularJS过滤器是AngularJS框架中用于数据转换和格式化的一种功能强大的工具,它们能够接收原始数据,并根据预设的规则进行处理,然后输出格式化后的结果。在AngularJS中,过滤器通常与表达式一起使用,通过管道符 ...

    angularjs过滤器--filter与ng-repeat配合有奇效

    在介绍AngularJS过滤器-filter与ng-repeat的配合使用时,我们首先需要了解这两个指令在AngularJS框架中所扮演的角色。AngularJS是一个开源的前端框架,由Google支持,广泛用于开发动态Web应用程序。它通过引入双向...

    AngularJS 过滤器(自带和自建)详解

    AngularJS中过滤器的作用是格式化需要展示给用户的数据。在AngularJS的HTML模板绑定中,我们通过在绑定符号{{}}内使用|符号调用过滤器。例如,{{value|lowercase}}这样的表达式可以将值转换成小写。除了在HTML模板中...

    详解AngularJS过滤器的用法_.docx

    详解 AngularJS 过滤器的用法 AngularJS 过滤器是用来格式化需要展现给用户的数据的强大工具。 AngularJS 提供了许多内置的有用的过滤器,同时也允许开发者自己编写过滤器。在 HTML 模板中,可以通过使用 {{ }} ...

    Angularjs之filter过滤器(推荐)

    下面将详细介绍一些常用的AngularJS过滤器及其用法。 1. `lowercase` 和 `uppercase` 过滤器: - `lowercase` 过滤器用于将字符串转换为小写,如 `{{ lastName | lowercase }}`。 - `uppercase` 过滤器则用于将...

    Angularjs过滤器使用详解

    总之,AngularJS过滤器是数据呈现和处理的关键工具,它们帮助开发者将原始数据转化为适合用户阅读的形式,同时也方便在业务逻辑中进行数据筛选和转换。熟练掌握过滤器的使用,能极大地提升AngularJS应用的用户体验和...

    实例解析angularjs的filter过滤器

    AngularJS的Filter过滤器是其数据绑定功能的重要组成部分,它允许开发者对数据进行转换和格式化,以便在视图中展示。以下是对AngularJS Filter过滤器的详细解析: 1. **Lowercase和Uppercase**: 这两个过滤器分别...

    AngularJS 过滤器的简单实例

    AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个...

    ykFiltersCapitalize:AngularJS 的大写过滤器

    AngularJS 过滤器将句子和特别是团队名称大写。 分叉和大量修改 安装(尚未发布) 您可以使用安装过滤器: $ bower install yk.filters.capitalize 然后你必须将它包含在你的 HTML 中: &lt; script src =" ...

    AngularJS 过滤器

    AngularJS 过滤器 过滤器可以使用一个管道字符(|)添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个...

    angularjs-filters:AngularJS 过滤器

    **AngularJS 过滤器详解** AngularJS 是一个强大的 JavaScript 框架,它通过数据绑定和依赖注入简化了前端开发。在 AngularJS 中,过滤器(Filters)是一种功能强大的工具,它们可以用来转换和格式化视图中的数据,...

    详解AngularJS中$filter过滤器使用(自定义过滤器)

    AngularJS内建了多种过滤器,同时也支持自定义过滤器,使得我们可以根据项目的特定需求进行定制。 ### 内置过滤器 AngularJS内置了多种过滤器,例如: 1. **`number`** - 用于格式化数字,可以设定小数点后的位数...

    详解AngularJS 过滤器的使用

    本文将深入探讨AngularJS过滤器的使用方法,以及在特定场景下的应用策略。 过滤器的本质是一个接收输入并返回处理后的输出的方法。在我们的示例中,有一个名为`yunzhiComputer`的过滤器,它接收用户和计算机名称...

    AngularJS-Filters:AngularJS中过滤器的实现

    在本项目“AngularJS-过滤器”中,我们将深入探讨AngularJS过滤器的实现及其用法。 1. **定义与使用过滤器** 在AngularJS中,过滤器可以通过两种方式使用:在HTML模板中和在JavaScript控制器中。在HTML中,我们...

Global site tag (gtag.js) - Google Analytics