详解Angular的内置过滤器和自定义过滤器【推荐】


Posted in Javascript onDecember 26, 2016

在实际的开发过程中,很多後端返回给我们的数据都是需要格式化处理的,在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中使用过滤器。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS类定义原型方法的两种实现的区别评论很多
Sep 12 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
Mar 03 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 Javascript
Angular路由简单学习
Dec 26 #Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 #Javascript
Angular工具方法学习
Dec 26 #Javascript
angular双向绑定模拟探索
Dec 26 #Javascript
jquery Banner轮播选项卡
Dec 26 #Javascript
Javascript中常用类型的格式化方法小结
Dec 26 #Javascript
Angular的自定义指令以及实例
Dec 26 #Javascript
You might like
PHP脚本的10个技巧(5)
2006/10/09 PHP
深入解析php模板技术原理【一】
2008/01/10 PHP
php+xml编程之xpath的应用实例
2015/01/24 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
js获取事件源及触发该事件的对象
2013/10/24 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
JS验证input输入框(字母,数字,符号,中文)
2017/03/23 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python lxml模块安装教程
2015/06/02 Python
python中引用与复制用法实例分析
2015/06/04 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
python实现猜单词小游戏
2020/05/22 Python
python word转pdf代码实例
2019/08/16 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
Python pip配置国内源的方法
2020/02/14 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
Python 多线程C段扫描、检测 Ping扫描脚本的实现
2020/09/03 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
门卫工作岗位职责
2013/12/17 职场文书
部队党性分析材料
2014/02/16 职场文书
协议书的格式
2014/04/23 职场文书
个人租房协议书
2014/11/28 职场文书
写给医院的感谢信
2015/01/22 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
python中的None与NULL用法说明
2021/05/25 Python
用Java实现简单计算器功能
2021/07/21 Java/Android