详解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 相关文章推荐
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 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
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
javascript中处理时间戳为日期格式的方法
2014/01/02 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
详解JavaScript树结构
2017/01/09 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
微信小程序授权登录及解密unionId出错的方法
2018/09/26 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
Python中请使用isinstance()判断变量类型
2014/08/25 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
如何安装2019Pycharm最新版本(详细教程)
2019/09/26 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python用700行代码实现http客户端
2021/01/14 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
电子专业毕业生自我鉴定
2014/01/22 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
搞笑婚前保证书
2015/02/28 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android