首页
AngularJS
04：内置过滤器和自定义过滤器

04：内置过滤器和自定义过滤器

作者：田大才子2016-10-2 13:47分类： AngularJS

本文所有文字解释都在代码中以注释的方式存在。

请复制代码到自己喜欢的文本编辑器中观看。

温馨提示如有转载或引用以上内容之必要，敬请将本文链接作为出处标注，谢谢合作！

以下为全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内置过滤器和自定义过滤器</title>
	<!-- 引入angular.js文件 -->
	<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" >
	
	<!--
		过滤器可以通过一个管道字符（|）和一个过滤器添加到表达式中。
		一共有以下九种内置过滤器可以使用
		currency	格式化数字为货币格式。
		filter		从数组项中选择一个子集。
		lowercase	格式化字符串为小写。
		orderBy		根据某个表达式排列数组。
		uppercase	格式化字符串为大写。
		number		为数字加上千分号，然后可以确定保留几位小数
		date 		日期格式化
		limitTo		限制数组长度或字符串长度（鸡肋，感觉没用）
		json		把一个js对象格式化为一个json对象（鸡肋，感觉没用）
	-->

	<div ng-controller="personCtrl">
		<!-- uppercase：大写格式 -->
		<p>大名为 {{ lastName | uppercase }}</p>
		<!-- lowercase：小写格式 -->
		<p>小名为 {{ firstName | lowercase }}</p>
		<!-- currency：货币格式 -->
		<p>价格为 {{ money | currency:"￥" }}</p>
		<!-- number：4位保留小数的位数 -->
		<p>数字为 {{ money | number:4 }}</p>
		<!-- date：日期格式化 -->
		<p>现在为 {{ now | date : 'yyyy/MM/dd hh:mm:ss EEEE' }}</p>
		<!-- 
			orderBy：根据num排序，true为降序，false为升序
			filter：该过滤器后跟一个冒号和一个模型名称,根据test的内容过滤
			limitTo：限制数组只要前三个
		-->
		<p>输入过滤:</p>
		<p><input type="text" ng-model="test"></p>
		<ul>
		  <li ng-repeat="x in names | orderBy:'num':false | filter:test | limitTo:3">
		    {{ x.num + '：' + x.name + ', ' + x.country }}
		  </li>
		</ul>
		<!-- json：把一个数组转换成json串，和JSON.stringify()作用一样 -->
		<p>数组Json</p>
		<pre>{{ names | orderBy:'num':false | json }}</pre>

		<!--
			自定义过滤器的使用
		-->
		<p>奇数数组Json</p>
		<pre>{{ names | odditems | json }}</pre>

	</div>


	<script>

		var app = angular.module('myApp', []);

		app.controller('personCtrl', function($scope) {
		    $scope.lastName  = "tianqing";
		    $scope.firstName = "TIANQING";
		    $scope.money =  9999999.12345;
		    $scope.now =  new Date();
		    $scope.names = [
							{name:'Jani',country:'Norway',num:3},
							{name:'Hege',country:'Sweden',num:1},
							{name:'Kai',country:'Denmark',num:2},
							{name:'Tian',country:'China',num:4}
						];

		});

		//自定义一个过滤器，只要num是奇数的元素
		app.filter('odditems',function(){
		    return function(inputArray){
		        var array = [];
		        for(var i = 0;i < inputArray.length;i++){
		            if(inputArray[i].num%2 !== 0){
		                array.push(inputArray[i]);
		            }
		        }
		        return array;
		    }
		});

	</script>

</body>
</html>

Plugins by ewCEO.com

« 05：AngularJS 依赖注入 | 教主弹弓游戏制作 »

已有 0/3243 人参与

发表评论：

04：内置过滤器和自定义过滤器

已有 0/3243 人参与

搜索

日历

最新文章

热门文章

随机文章

04：内置过滤器和自定义过滤器

相关文章

已有 0/3243 人参与

搜索

日历

最新文章

热门文章

随机文章