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中生成map对象的方法
Jan 09 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php定界符
2014/06/19 PHP
javascript数组与php数组的地址传递及值传递用法实例
2015/01/22 PHP
javascript 二进制运算技巧解析
2012/11/27 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
Node.js开启Https的实践详解
2016/10/25 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
Python中类型检查的详细介绍
2017/02/13 Python
python之PyMongo使用总结
2017/05/26 Python
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
利用Pycharm + Django搭建一个简单Python Web项目的步骤
2020/10/22 Python
资产经营总监岗位职责
2013/12/04 职场文书
社团文化节策划书
2014/02/01 职场文书
鼓舞士气的口号
2014/06/16 职场文书
租房安全协议书
2014/08/20 职场文书
法人委托书范本
2014/09/15 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
元旦晚会开场白
2015/05/29 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL