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 相关文章推荐
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
Mar 02 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
前端面试知识点目录一览
Apr 15 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
javascript的惯性运动实现代码实例
Sep 07 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 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
Session保存到数据库的php类分享
2011/10/24 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
php中数组最简单的使用方法
2020/12/27 PHP
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python实现爬取千万淘宝商品的方法
2015/06/30 Python
利用django如何解析用户上传的excel文件
2017/07/24 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Django之Mode的外键自关联和引用未定义的Model方法
2018/12/15 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
网络工程师的自我评价
2013/10/02 职场文书
实习期自我鉴定
2013/10/11 职场文书
自荐信如何制作?
2014/02/21 职场文书
反腐倡廉标语
2014/06/24 职场文书
公司年底活动方案
2014/08/17 职场文书
2015年科普工作总结
2015/07/23 职场文书
教师节获奖感言
2015/07/31 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python