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 相关文章推荐
JS打印gridview实现原理及代码
Feb 05 Javascript
浅谈JS日期(Date)处理函数
Dec 07 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
Mar 02 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
浅谈JS对象添加getter与setter的5种方法
Jun 09 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 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实现memcache缓存示例讲解
2013/12/04 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python多线程实现同步的四种方式
2017/05/02 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
python3爬取数据至mysql的方法
2018/06/26 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
特步官方商城:Xtep
2017/03/21 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
方正Java笔试题
2014/07/03 面试题
实习生工作证明范本
2014/09/14 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
工会文体活动总结
2015/05/07 职场文书
python实现监听键盘
2021/04/26 Python