Angularjs学习(4)之过滤器

过滤器用来格式化需要展示给用户的数据。 AngularJS有很多实用的内置过滤器，同时也提供了方便的途径可以自己创建过滤器。
在HTML中的模板绑定符号内通过|符号来调用过滤器，可以用|符号作为分割符来同时使用多个过滤器，我们先来介绍AngularJS提供的内置过滤器。

currency

currecy过滤器可以将一个数值格式化为货币格式。用{{ 123 | currency }}将123转化成货币格式。
currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号，但是也可以自定义货币符号。

date

date过滤器可以将日期格式化成需要的格式。 AngularJS中内置了几种日期格式，如果没有指定使用任何格式，默认会采用mediumDate格式

filter

filter过滤器可以从给定数组中选择一个子集，并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。

参数	介绍
字符串	返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加!符号。
对象	AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串就会判断是否包含该字符串。如果我们希望对全部属性都进行对比，可以将$当作键名。
函数	对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。
true	用angular.equals(expected, actual)对两个值进行严格比较。
false	进行区分大小写的子字符串比较。

json

json过滤器可以将一个JSON或JavaScript对象转换成字符串。

{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}
<!--
{
"name": "Ari",
"City": "San Francisco"
}
-->

limitTo

limitTo过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取。

lowercase

lowercase过滤器将字符串转为小写。

number

number过滤器将数字格式化成文本。它的第二个参数是可选的，用来控制小数点后截取的位数。

orderBy

orderBy过滤器可以用表达式对指定的数组进行排序。orderBy可以接受两个参数，第一个是必需的，第二个是可选的。

参数	介绍
字符串	对这个字符串进行解析的结果将决定数组元素的排序方向。我们可以传入+或-来强制进行升序或降序排列。
数组	在排序表达式中使用数组元素作为谓词。对于与表达式结果并不严格相等的每个元素，则使用第一个谓词。
函数	当第一个参数是函数时，该函数会被当作待排序对象的getter方法。

自定义过滤器

创建自定义过滤器需要将它放到自己的模块中。下面我们一起来实现一个过滤器，将字符串第一个字母转换为大写。

angular.module('myApp.filters', []).filter('capitalize', function() {
	return function(input) {
	// input是我们传入的字符串
	if (input) {
		return input[0].toUpperCase() + input.slice(1);
	}
});

表单验证

AngularJS能够将HTML5表单验证功能同它自己的验证指令结合起来使用，并且非常方便。AngularJS提供了很多表单验证指令，我们会介绍其中一些核心的验证功能，然后介绍如何创建自己的验证器。

• $parsers

当用户同控制器进行交互，并且ngModelController中的$setViewValue()方法被调用时，$parsers数组中的函数会以流水线的形式被逐个调用。第一个$parse被调用后，执行结果会传递给第二个$parse，以此类推。
这些函数可以对输入值进行转换，或者通过$setValidity()函数设置表单的合法性。使用$parsers数组是实现自定义验证的途径之一。例如，假设我们想要确保输入值在某两个数值之间，可以在$parsers数组中入栈一个新的函数，这个函数会在验证链中被调用。每个$parser返回的值都会被传入下一个$parser中。当不希望数据模型发生更新时返回undefined。

angular.module('myApp').directive('oneToTen', function() {
	return {
		require: '?ngModel',
		link: function(scope, ele, attrs, ngModel) {
			if (!ngModel) return;
			ngModel.$parsers.unshift(
				function(viewValue) {
					var i = parseInt(viewValue);
					if (i >= 0 && i < 10) {
						ngModel.$setValidity('oneToTen', true);
						return viewValue;
					} else {
						ngModel.$setValidity('oneToTen', false);
						return undefined;
					}

				});
			}
		};
});

$formatters

当绑定的ngModel值发生了变化，并经过$parsers数组中解析器的处理后，这个值会被传递给$formatters流水线。同$parsers数组可以修改表单的合法性状态类似， $formatters中的函数也可以修改并格式化这些值。

angular.module('myApp').directive('oneToTen', function() {
	return {
		require: '?ngModel',
		link: function(scope, ele, attrs, ngModel) {
		if (!ngModel) return;
			ngModel.$formatters.unshift(function(v) {
				return $filter('number')(v);
			});
		}
	};
});

下面我们一起创建一个注册表单。表单中包括用户的名字、邮件地址以及用户名
JS Bin on jsbin.com