AngularJS -- 过滤器

过滤器

过略器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器，
同时也提供了方便的途径可以自己创建过滤器。

在HTML总的模板绑定符号{{ }} 内通过|符号来调用过滤器。例如，假设我们
希望将字符串转换成大写，可以将字符串中的每个字符都单独进行转换操作，也
可以使用过滤器：

在JavaScript代码中可以通过$filter来调用过滤器。例如，在JavaScript代码中使用
lowercase过滤器：

app.controller('DemoController', ['$scope', '$filter',
    function($scope, $filter) {
    $scope.name = $filter('lowercase')('Ari');
}]);

以HTML的形式使用过滤器时，如果需要传递参数给过滤器，只要在过滤器名字后面加冒号
即可。如果有多个参数，可以在每个参数后面都加入冒号。例如，数值过滤器可以限制小数点后
的位数，在过滤器后写上:2可以将2作为参数传给过滤器：

{{ 123.456789 | number:2 }}
可以用|符号作为分割符来同时使用多个过滤器

currency

currency过滤器可以将一个数值格式化为货币格式。
用{{ 123 | currency }} 来将123转化成货币格式。

currency过滤器允许我们自己设置货币符号，默认情况下会采用客户端所处区域的货币符号。

date

date过滤器可以将日期格式化吃成需要的格式

内置的支持本地化的日期格式：

{{ today | date:'medium' }}    <!-- Aug 09, 2013 12:09:02 PM --> 
{{ today | date:'short' }}     <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }}  <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }}  <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

年份格式化

四位年份：{{ today | date:'yyyy' }} <!-- 2013 --> 
两位年份：{{ today | date:'yy' }} <!-- 13 --> 
一位年份：{{ today | date:'y' }} <!-- 2013 -->

月份格式化

英文月份：{{ today | date:'MMMM' }} <!-- August --> 
英文月份简写：{{ today | date:'MMM' }} <!-- Aug --> 
数字月份：{{ today |date:'MM' }} <!-- 08 --> 
一年中的第几个月份：{{ today |date:'M' }} <!-- 8 -->

日期格式化

数字日期：{{ today|date:'dd' }} <!-- 09 --> 
一个月中的第几天：{{ today | date:'d' }} <!-- 9 --> 
英文星期：{{ today | date:'EEEE' }} <!-- Thursday --> 
英文星期简写：{{ today | date:'EEE' }} <!-- Thu -->

小时格式化

24小时制数字小时：{{today|date:'HH'}} <!--00--> 
一天中的第几个小时：{{today|date:'H'}} <!--0--> 
12小时制数字小时：{{today|date:'hh'}} <!--12--> 
上午或下午的第几个小时：{{today|date:'h'}} <!--12-->

分钟格式化

数字分钟数：{{ today | date:'mm' }} <!-- 09 --> 
一个小时中的第几分钟：{{ today | date:'m' }} <!-- 9 -->

秒数格式化

数字秒数：{{ today | date:'ss' }} <!-- 02 --> 
一分钟内的第几秒：{{ today | date:'s' }} <!-- 2 --> 
毫秒数：{{ today | date:'.sss' }} <!-- .995 -->

字符格式化

上下午标识：{{ today | date:'a' }} <!-- AM --> 
四位时区标识：{{ today | date:'Z' }} <!--- 0700 -->

下面是一些自定义日期格式的示例：

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 --> 
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8--> 
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

字符串

返回所有包含这个字符串的元素。如果我们想返回不包含该字符串的元素，在参数前加
!符号。

对象

AngularJS会将待过滤对象的属性同这个对象中的同名属性进行比较，如果属性值是字符串
就会判断是否包含该字符串。如果我们希望对全部属性都进行对比，可以将
$当作键名。

函数

对每个元素都执行这个函数，返回非假值的元素会出现在新的数组中并返回。例如，用下面的过滤器可以选择所有包含字母
e的单词：

如果要过滤对象，可以使用上面提到的对象过滤器。例如，如果有一个由
people对象组成的数组，每个对象都含有他们最喜欢吃的食物的列表，那么可以用下面的形式进行过滤：

{{ [{ 
    'name': 'Ari', 
    'City': 'San Francisco', 
    'favorite food': 'Pizza' 
    },{ 
    'name': 'Nate', 
    'City': 'San Francisco', 
    'favorite food': 'indian food' 
    }] | filter:{'favorite food': 'Pizza'} }} 
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

isCapitalized函数的功能是根据首字母是否为大写返回true或false

//HTML

<div id="emailEditor" ng-controller="MyController">
    {{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
</div>

JAVASCRIPT

angular.module('myApp', [])
.controller('MyController', ['$scope', '$filter', 
  function($scope, $filter) { 
    $scope.isCapitalized = function(str) { 
	    return str[0] == str[0].toUpperCase(); 
	}; 
}]);

我们也可以给filter过滤器传入第二个参数，用来指定预期值同实际值进行比较的方式。
第二个参数可以是以下三种情况之一。

true 用angular.equals(expected, actual)对两个值进行严格比较。
false 进行区分大小写的子字符串比较。
函数运行这个函数，如果返回真值就接受这个元素。

json过滤器可以将一个JSON或javaScript对象转换成字符串。这种转换对调试非常有帮助：

{
 "name": "Ari",
 "City": "San Francisco"
}

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

如果传入的长度值大于被操作数组或字符串的长度，那么整个数组或字符串都会被返回。

{{ San Francisco is very cloudy | limitTo:3 }}
{{ San Francisco is very cloudy | limitTo:-6 }}
{{['a', 'b', 'c', 'd'] | limitTo:1 }}

lowercase过滤器将字符串转为小写。
{{ "San Francisco is very cloudy" | lowercase }}

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

如果传入了一个非数字字符，会返会空字符串。

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

当第一个参数是函数时，该函数会被当作待排序对象的getter方法。

对这个字符串进行解析的结果将决定数组元素的排序方向。我们可以传入
+或-来强制进行升序或降序排列。

在排序表达式中使用数组元素作为谓词。对于与表达式结果并
不严格相等的每个元素，则使用第一个谓词。

第二个参数用来控制排序的方向（是否逆向）。

{{ [{ 
    'name': 'Ari', 
    'status': 'awake' 
    },{ 
    'name': 'Q', 
    'status': 'sleeping' 
    },{ 
    'name': 'Nate', 
    'status': 'awake' 
    }] | orderBy:'name' }} 
<!--
  [
  {"name":"Ari","status":"awake"},
  {"name":"Nate","status":"awake"},
  {"name":"Q","status":"sleeping"}
  ]
-->

也可以对排序结果进行反转。例如，通过将第二个参数设置为
true可以将排序结果进行反转：

{{ [{ 
    'name': 'Ari', 
    'status': 'awake' 
    },{ 
    'name': 'Q', 
    'status': 'sleeping' 
    },{ 
    'name': 'Nate', 
        'status': 'awake' 
    }] | orderBy:'name':true }} 
<!--
  [
  {"name":"Q","status":"sleeping"}, 
  {"name":"Nate","status":"awake"}, 
  {"name":"Ari","status":"awake"}
  ]
-->

uppercase过滤器可以将字符串转换为大写形式：

自定义过滤器

创建一个过滤器非常容易，创建自定义过滤器需要将它放到自己的模块中。
如：将字符串第一个字母转换为大写：

HTML

{{ 'abcddefg' | capitalize }}

首先，创建一个模块用以在应用中进行引用（这是一个非常好的实践）：

JAVASCRIPT

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

posted @ 2015-05-01 14:29 小数阅读(2282) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

小数-博客

QQ:283125476

AngularJS -- 过滤器

过滤器

currency

date

自定义过滤器

公告