在实际的开发过程中,很多後端返回给我们的数据都是需要格式化处理的,在angular中为我们内置提供了filter指令,可以很方便的对数据进行处理。首先我们看看在视图中是如何使用过滤器的。
1、currency(货币)格式化
<div ng-controller="Aaa"> <p>{{name | currency:'¥'}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = '12334.273489274834'; }]); </script>
在name的数据後面使用|符号表示启用过滤器,如果对linux比较熟悉的话,这块的|根linux的管道功能。currency可以理解成函数,而'¥'则是函数的参数,如果不传默认为$符号!
2、number(数字)格式化
<div ng-controller="Aaa"> <p>{{name | number:2}}</p> </div> <script type="text/javascript"> $scope.name = '12334.273489274834'; </script>
用来精确浮点数(精确到2位)默认是3位。
3、uppercase , lowercase(大小写)格式化
<div ng-controller="Aaa"> <p>{{name | uppercase}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = 'hello'; }]); </script>
uppercase转换成大写,lowercase转换成小写
4、json(数据)格式化
<div ng-controller="Aaa"> <pre>{{name | json}}</pre> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = { name : 'xcg',age : 19 }; }]); </script>
以json的格式输出到页面中,视图只能使用pre标签才可以识别
5、limitTo(截取)格式化
<div ng-controller="Aaa"> <p>{{name | limitTo : 3}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = '123456789'; }]); </script>
截取字符串,数字不行。。。
6、limitTo(截取)格式化
<div ng-controller="Aaa"> <p>{{name | date : 'yyyy-MM-dd hh:mm:ss'}}</p> <p>{{name | date : 'MM/dd/yyyy @ h:mma'}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = 1448022616463; }]); </script>
7、orderBy(排序)格式化
<div ng-controller="Aaa"> <pre>{{name | orderBy : 'age' : true | json}}</pre> <div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = [ {color : 'red',age : '10'}, {color : 'yellow',age : '20'}, {color : 'blue',age : '30'}, {color : 'green',age : '40'} ]; }]); </script>
如果排序的值是字母,就按照字母的顺序来排序。如果是数字,从大到小。传入true则为逆向排序。
8、filter(筛选&过滤)格式化
<div ng-controller="Aaa"> <pre>{{name | filter : 'l' | json}}</pre> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = [ {color : 'red',age : '10'}, {color : 'yellow',age : '20'}, {color : 'blue',age : '30'}, {color : 'green',age : '40'} ]; }]); </script>
在filter传入'l',会筛选出blue以及yellow。
<pre>{{name | filter : 'yellow' : true | json}}</pre> 如果像这样再传入true,就必须保证value的完整性,单单的'l'是无法筛选出来的。
上面都是在视图中以表达式的形式使用过滤器,下面我们来看看在JS中使用过滤器。
<div ng-controller="Aaa"> <p>{{currency}}</p> <p>{{number}}</p> <p>{{uppercase}}</p> <pre>{{json}}</pre> <p>{{limitTo}}</p> <p>{{date}}</p> <pre>{{orderBy}}</pre> <pre>{{filter}}</pre> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope','$filter',function($scope,$filter){ var colors = [{color : 'red',age : '10'}, {color : 'yellow',age : '20'}, {color : 'blue',age : '30'}, {color : 'green',age : '40'}]; $scope.currency = $filter('currency')(12334.273489274834,'¥'); $scope.number = $filter('number')('12334.273489274834',2); $scope.uppercase = $filter('uppercase')('hello'); $scope.json = $filter('json')({ name : 'xcg',age : 19 }); $scope.limitTo = $filter('limitTo')('xiecg',2); $scope.date = $filter('date')('1448106268837','yyyy-MM-dd hh:mm:ss'); $scope.orderBy = $filter('orderBy')(colors,'age',true); $scope.filter = $filter('filter')(colors,'l'); }]); </script>
这些都属于内置过滤器,我们还可以用.filter自定义过滤器。
<div ng-controller="Aaa"> <p>{{name | firstUpper : 2}}</p> </div> <script type="text/javascript"> var m1 = angular.module('myApp',[]); //自定义过滤器 m1.filter('firstUpper',function(){ return function(str,num){ console.log(num); //2,得到传递的参数 return str.charAt(0).toUpperCase() + str.substring(1); } }); m1.controller('Aaa',['$scope','$filter',function($scope,$filter){ $scope.name = 'hollo'; }]); </script>
这里我们自定义了一个首字母大写的方法,例子是在视图中使用的,也可以在JS中使用过滤器。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]