AngularJS常见过滤器用法实例总结


Posted in Javascript onJuly 06, 2017

本文实例讲述了AngularJS常见过滤器用法。分享给大家供大家参考,具体如下:

过滤器用来格式化需要展示给用户的数据。在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。以下是常用的过滤器。

大小写过滤器

{{ name | uppercase }} 大写过滤器
{{ name | lowercase}} 小写过滤器

实例:(大写过滤器)

<div ng-controller='myController'>
  姓氏: <input type="text" ng-model="student.firstName"></br></br>
  名字: <input type="text" ng-model="student.lastName"></br></br>
  名字转大写: {{student.fullName() | uppercase}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
  $scope.student={
    firstName: "xu",
    lastName: "xiaohong",
    fullName:function(){
      var studentObject;
      studentObject = $scope.student;
      return studentObject.firstName + studentObject.lastName;
    }
  };
});
</script>

货币过滤器

currecy 过滤器可以将一个数值格式化为货币格式。用 {{ 123 | currency }} 来将123转化成货币格式。currecy 过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号,但是也可以自定义货币符号。如下:

<div ng-controller='myController'>
  Enter fees: <input type="text" ng-model="student.fees"></br>
  fees: {{student.fees | currency:'¥'}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
  $scope.student={
    fees:500
  };
});
</script>

日期过滤器

date 过滤器可以将日期格式化成需要的格式。如下:

<div ng-controller='myController'>
  {{data | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
</div>
<script>
var app=angular.module('app',[]);
app.controller('myController',function($scope){
  $scope.data=new Date();
});
</script>

limitTo过滤器

limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度。实例:

<body ng-controller="test">
  {{ childrenArray | limitTo : 2 }}
  <script>
    var app=angular.module('app',[]);
    app.controller('test',function($scope){
      $scope.childrenArray = [
        {name:'kimi',age:3},
        {name:'cindy',age:4},
        {name:'anglar',age:4},
        {name:'shitou',age:6},
        {name:'tiantian',age:5}
      ];
    });
  </script>
</body>

orderBy过滤器:

orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。可以是一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较),还是拿上面的孩子数组举例:

<div>{{ childrenArray | orderBy : 'age' }}</div>   //按age属性值进行排序
<div>{{ childrenArray | orderBy : orderFunc }}</div>  //按照函数的返回值进行排序
<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同,按照name进行排序

自定义过滤器:

AngularJS编写自定义过滤器的形式和AngularJS的factory service非常相像,一定记得它返回一个对象或者是一个函数即可,编写的时候,只需要一个带有一个以上参数的函数即可。格式大致如下:

app.filter('filter(过滤器)名称',function(){
      return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
           //...执行业务逻辑代码
           return 处理后的对象;
      }
});

实例:(首字母大写)

{{ 'ginger loves dog treats' | capitalize }}
<script>
  var app=angular.module('app',[]);
  app.filter('capitalize',function(){
    return function(input){
      if(input){
        return input.charAt(0).toUpperCase() + input.slice(1);
      }
    }
  })
</script>

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
巧用replace将文字表情替换为图片
Apr 17 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
网络传输协议(http协议)
Nov 18 Javascript
bootstrap suggest下拉框使用详解
Apr 10 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 Javascript
Vue学习之路之登录注册实例代码
Jul 06 #Javascript
AngularJS中ng-class用法实例分析
Jul 06 #Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 #jQuery
JS图片轮播与索引变色功能实例详解
Jul 06 #Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 #jQuery
vue2.0 keep-alive最佳实践
Jul 06 #Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 #Javascript
You might like
PHP中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
js实现简易的单数字随机抽奖(0-9)
2020/03/19 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
jQuery模拟窗口抖动效果
2017/03/15 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
Python封装shell命令实例分析
2015/05/05 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
python实现超市管理系统(后台管理)
2019/10/25 Python
python3爬虫中异步协程的用法
2020/07/10 Python
JPA的特点
2014/10/25 面试题
制药工程专业个人求职自荐信
2014/01/25 职场文书
护士自我评价范文
2014/01/25 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
新教师培训心得体会
2014/09/02 职场文书
公司领导班子对照检查材料
2014/09/24 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
《春酒》教学反思
2016/02/22 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL