AngularJS过滤器介绍
2017-07-12 00:00
363 查看
<!--与过滤器共舞 1.1 AngularJS过滤器介绍 AngularJS的过滤器用于处理数据以及将数据格式化后呈现给用户。可以通过HTML中的表达式来使用他们,也可以直接作用于控制器或服务中的数据。 大部分情况下,过滤器处于数据传递链上的最后一环,将数据转换为用户熟悉的格式。最常见的是时间雷响的数据转换,将数据转换成货币格式等。 其还有一个功能,当它们应用在视图中时,能够提供动态的数据,这些数据不需要被存储起来。当我们在html中使用过滤器时,被过滤后呈现给用户 的数据并不会改变它的初始值。 基本过滤器语法:{{expression|filter}}过滤器会接收表达式的值(字符串、数字或数组),然后将它转化成其他格式。 也可以使用多个过滤器语法如:{{expression|filter1|filter2}}例如:{{ctrl.name|lowercase|limitTo:5}}先将它转换成小写格式,然后只显示前5个字母 1.2常用的AngularJS过滤器 currency 货币过滤器将指定的数字格式化成包含分隔符,数字以及货币符号的货币格式。这个过滤器的第二个参数是可选的,代表货币符号。 number 数字过滤器可以通过添加分隔符来将数字转换成易读的格式,该过滤器也可以接收一个可选参数来决定保留小数点后几位 lowercase 小写过滤器 uppercase 大写过滤器 json json过滤器在调试过程中能起到至关重要的作用,当我们需要将某个JSON对象或者数组显示在UI中时它也能大显身手。它可以将JSON对象或数组转化成字符串显示 date date日期格式过滤器时高度自定义的,用户可以自行制定格式或者选择内置的三种格式(short,medium和long) 1.3如何显示数组格式的数据,如何根据需求切割以及排序 limitTo 接收字符串或者数组,然后根据开始索引或者结束索引返回输入值的子集。如果limitTo接收到了某个数字作为参数,那么当输入值是数组(字符串)时,它 返回相应个数元素(字符)。如果是负数,那么它会从后往前数。 orderby 让我们可以根据事先定义好的比较大小表达式(也可以是一组表达式)将数组进行排序。它的第二个参数是可选的布尔型,代表数组是否需要反序排序。 最简单的比较大小的表达式是一个字符串,它表示根据哪个字段进行排序(对象的键名),也可以在字段名之前添加可选的+或者-符号来决定按照 升序还是降序排列。比较大小的表达式也可以是函数,根据返回值来判断比较结果(通过简单的<、>和=比较)来决定顺序。最后表达式也可以是一个数组, 其中每个元素都是字符串或者数组。 filter filter通过断言或者函数来决定数组中的哪些元素是符合要求的,将添加到结果集中,而哪些将会被过滤掉。它通常和ng-repeat配合使用来动态 过滤数组。过滤表达式可能是:string object function string:如果表达式是一个字符串,那么AngularJS会扫描数字中每个对象的键集,如果其中包含了指定的字符串,那么该元素就符合要求。可以 在字符串前增加!前缀,结果正好相反,包含该字符串的元素会被过滤掉。 object:如果表达式是一个匹配对象,那么AngularJS会扫描数字中每个对象的键值。如:表达式为{size,"M"},查找每个对象中是否包含了size这个 键名,而它的值中是否包含了"M"这个字符(不一定正好为"M"). function:具有灵活性。 --> <!--1.2实例--> <!--<html>--> <!--<head>--> <!--<title>Filters in Action</title>--> <!--</head>--> <!--<body ng-app="filtersApp">--> <!--<div ng-controller="FilterCtrl as ctrl">--> <!--<div>--> <!--Amount as a number:{{ctrl.amount | number}}--> <!--</div>--> <!--<div>--> <!--Amount as a number:{{ctrl.amount | number:4}}--> <!--</div>--> <!--<div>--> <!--Total Cost as a currency:{{ctrl.totalCost|currency}}--> <!--</div>--> <!--<div>--> <!--Total Cost in INR:{{ctrl.totalCost|currency:'£'}}--> <!--</div>--> <!--<div>--> <!--Shouting the name:{{ctrl.name|uppercase}}--> <!--</div>--> <!--<div>--> <!--Whispering the name:{{ctrl.name|lowercase}}--> <!--</div>--> <!--<div>--> <!--Start Time:{{ctrl.startTime|date:'medium'}}--> <!--</div>--> <!--<div>--> <!--Start Time:{{ctrl.startTime|date:'short'}}--> <!--</div>--> <!--<div>--> <!--Start Time:{{ctrl.startTime}}<!–长整型格式的时间–>--> <!--</div>--> <!--<div>--> <!--Start Time:{{ctrl.startTime|date:'M/dd,yyyy'}}--> <!--</div>--> <!--<div>--> <!--The Json Filter:{{ctrl.obj|json}}--> <!--</div>--> <!--</div>--> <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>--> <!--<script>--> <!--angular.module('filtersApp',[])//AngularJS中module函数的第一个参数代表了模块名称,第二个参数是一个数组,表示该模块所依赖的模块名称列表。--> <!--.controller('FilterCtrl',[function () {--> <!--this.amount=1024;--> <!--this.totalCost=4906;--> <!--this.name='Shyam Seshadri';--> <!--this.startTime=new Date().getTime();--> <!--this.obj={test:'value',num:123}--> <!--}]);--> <!--</script>--> <!--</body>--> <!--</html>--> <!--1.3实例--> <html> <head> <title>Filters in Action</title> </head> <body ng-app="filtersApp"> <div ng-controller="FilterCtrl as ctrl"> <button ng-click="ctrl.currentFilter='string'">Filter with String</button> <button ng-click="ctrl.currentFilter='object'">Filter with Object</button> <button ng-click="ctrl.currentFilter='function'">Filter with Function</button> Filter Text <input type="text" ng-model="ctrl.filterOptions['string']">Show Done Only <input type="checkbox" ng-model="ctrl.filterOptions['object'].done"> <ul> <li ng-repeat="note in ctrl.notes | filter:ctrl.filterOptions[ctrl.currentFilter]|orderBy:ctrl.sortOrder|limitTo:5"><!--最多保留5个元素--> {{note.label}}-{{note.type}}-{{note.done}} </li> </ul> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script> <script type="text/javascript"> angular.module('filtersApp',[]) .controller('FilterCtrl',[function () { this.notes=[ {label:'FC Todo',type:'chore',done:false}, {label:'FT Todo',type:'task',done:false}, {label:'FFC Todo',type:'fun',done:true}, {label:'SC Todo',type:'chore',done:false}, {label:'ST Todo',type:'task',done:true}, {label:'SF Todo',type:'fun',done:true}, {label:'TC Todo',type:'chore',done:false}, {label:'TT Todo',type:'task',done:false}, {label:'TF Todo',type:'fun',done:false}, ]; this.sortOrder=['+type','-label'];//先通过type来排列数组,如果相同,再通过label降序排列。 this.filterOptions={ "string":'', "object":{done:false,label:'c'}, "function":function (note) { return note.type==='task'&¬e.done===false; } }; this.currentFilter='string'; }]) // 在控制器和服务器中使用过滤器 //任何过滤器,无论是内置的还是自定义的,都可以通过在名称中添加"Fiter"这个后缀并请求注入到服务和控制器中。eg: //angular.module('myModule',[]) //.controller('MyCtrl',['currencyFilter',function(currencyFilter){}]) .controller('FilterCtrl',['filterFilter',function (filterFilter) { this.notes=[ {label:'FC Todo',type:'chore',done:false}, {label:'FT Todo',type:'task',done:false}, {label:'FFC Todo',type:'fun',done:true}, {label:'SC Todo',type:'chore',done:false}, {label:'ST Todo',type:'task',done:true}, {label:'SF Todo',type:'fun',done:true}, {label:'TC Todo',type:'chore',done:false}, {label:'TT Todo',type:'task',done:false}, {label:'TF Todo',type:'fun',done:false}, ]; console.log(filterFilter(this.notes,'fun')); }]); </script> </body> </html> <!--创建AngularJS自定义过滤器
每一个过滤器都会返回一个函数,当进行过滤时该函数会被调用。传入的参数会在函数被调用时指定。 如果想传入可选参数,只需要在返回的函数中增加相应的参数定义。需要传多个参数格式如下: return function(ts,arg1,arg2,arg3){} {{ctrl.startTime|timeAgo:arg1:arg2:arg3}} 需要传入一个布尔型参数 return function(ts,ignoreSeconds){} {{ctrl.startTime|timeAgo:true}}
--> <html> <head> <title>Custom Filters in Action</title> </head> <body ng-app="filtersApp"> <div ng-controller="FilterCtrl as ctrl"> <div> Start Time(Timestamp):{{ctrl.startTime}} </div> <div> Start Time(DateTime):{{ctrl.startTime|date:'medium'}} </div> <div> Start Time(Our filter):{{ctrl.startTime|timeAgo}} </div> <div> Start Time(Our filter):{{ctrl.someTimeAgo|timeAgo}} </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script> <script type="text/javascript"> angular.module('filtersApp',[]) .controller('FilterCtrl',[function () { this.startTime=new Date().getTime(); this.someTimeAgo=new Date().getTime()-(1000*60*60*4); }]) .filter('timeAgo',[function () { var ONE_MINUTE=1000*60; var ONE_HOUR=ONE_MINUTE*60; var ONE_DAY=ONE_HOUR*24; var ONE_MONTH=ONE_DAY*30; return function(ts){ var currentTime=new Date().getTime(); var diff=currentTime-ts; if(diff<ONE_MINUTE){ return 'seconds ago'; }else if(diff<ONE_DAY){ return 'hours ago'; }else if(diff<ONE_MONTH){ return 'days ago'; }else{ return 'months ago'; } } }]) </script> </body> </html>
相关文章推荐
- MEAN Stack入门-1: Node.js-to-AngularJS组件介绍
- angularJS---自定义过滤器
- AngularJS入门教程09:过滤器
- java filter过滤器的功能简要介绍
- 过滤器、监听器、拦截器的介绍与区别
- 详解AngularJS中$filter过滤器使用(自定义过滤器)
- Servlet过滤器介绍之原理分析
- Servlet过滤器介绍之原理分析
- (8)AngularJS 1.X 之过滤器
- AngularJS过滤器filter,orderBy排序,删除全部数据2
- AngularJS开发指南24:AngularJS过滤器
- ASP.NET过滤器的应用方法介绍
- angularJS中把html格式的字符串转成html格式显示,ng-bind-html与trustAsHtml的过滤器
- angularJS(3) - 过滤器
- [乐意黎转载]AngularJS快速入门指南06:过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- AngularJS入门教程之过滤器用法示例
- AngularJS学习--- 过滤器(filter),格式化要显示的数据 step 9
- AngularJS中的基本概念介绍