AngularJS 笔记系列(五)过滤器 filter
2016-06-24 14:47
302 查看
过滤器是用来格式化给用户展示的数据的。
在 HTML 中的模板绑定符号{{}} 内通过|符号来调用过滤器。
大写:{{ name | uppercase }}
也可以在 JS 中进行调用$filter 服务。
向过滤器传参:{{1234.5643445 | number:2 }}
常用的过滤器:
货币 {{123.5 | currency }}
date
年份 {{ today | date:'yyyy' }} <!-- 2013 --> {{ today | date:'yy' }} <!-- 13 --> {{ today | date:'y' }} <!-- 2013 -->
月份 { today | date:'MMMM' }} <!-- August -->{{ today | date:'MMM' }} <!-- Aug --> {{ today |date:'MM' }}{{ today |date:'M' }}
过滤器 filter
过滤器可以从给定数组中选择一个子集,然后作为一个新数组返回。
参数:
string
返回所有包含这个字符串的元素。参数前加!返回不包含该 string 的元素。
object
将参数的属性和值与被过滤元素相应的属性进行比较,过滤出一致的元素。
function
对所有元素执行这个函数,过滤出返回结果为非假值的元素。
json
将一个 JSON 或者 JS 对象转换成字符串;
limitTo
限制返回的数组或者字符串的长度;
orderBy
接受两个参数,第一个是必需的,第二个可选。第一个是排序条件,第二个是个布尔值,true 则按照排序条件逆序输出。
自定义过滤器
定义一个模块用来创建 filter 是比较好的方法。
在 HTML 中的模板绑定符号{{}} 内通过|符号来调用过滤器。
大写:{{ name | uppercase }}
也可以在 JS 中进行调用$filter 服务。
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.name = $filter('lowercase')('Ari'); }]);
向过滤器传参:{{1234.5643445 | number:2 }}
常用的过滤器:
货币 {{123.5 | currency }}
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' }}{{ today |date:'M' }}
过滤器 filter
过滤器可以从给定数组中选择一个子集,然后作为一个新数组返回。
参数:
string
返回所有包含这个字符串的元素。参数前加!返回不包含该 string 的元素。
{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }} <!-- ["Lerner","Likes","Eat"] -->
object
将参数的属性和值与被过滤元素相应的属性进行比较,过滤出一致的元素。
{{ [{ '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"}] -->
function
对所有元素执行这个函数,过滤出返回结果为非假值的元素。
json
将一个 JSON 或者 JS 对象转换成字符串;
{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }} <!-- { "name": "Ari", "City": "San Francisco" }-->
limitTo
限制返回的数组或者字符串的长度;
orderBy
接受两个参数,第一个是必需的,第二个可选。第一个是排序条件,第二个是个布尔值,true 则按照排序条件逆序输出。
自定义过滤器
定义一个模块用来创建 filter 是比较好的方法。
angular.module('myApp.filters', []) .filter('capitalize', function(input) { if (input) { return input[0].toUpperCase() + input.slice(1); } });
相关文章推荐
- AngularJS 笔记系列(四)控制器和表达式
- AngularJS 路由的理解
- AngularJS 路由和模板实例及路由地址简化方法(必看)
- Angular 2与TypeScript概览
- AngularJS 路由和模板实例及路由地址简化方法(必看)
- angularJs在线API文档
- angular指令系列---多行文本框自动高度
- angularJS通过jsonp实现跨域访问
- angularjs提示框及正则表达式校验
- AngularJS过滤器
- angularJs 页面筛选标签小功能
- angularjs中使用ng-repeat需要注意的东西
- AngularJS:何时应该使用Directive、Controller、Service?
- AngularJS 路由和模板实例及路由地址简化方法
- 开发中遇到的angularJs的小问题
- 1-4.编写一个绑定多个页面元素的angular程序
- 1-3.编写一个绑定页面元素的angular程序
- 1-2.编写一个具有计算功能的angular程序
- 1-1.第一个简单的angular程序
- angularJs工作日记-自定义指令Directive01