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写的实用看图工具实现代码
Jul 26 Javascript
javascript 函数使用说明
Apr 07 Javascript
Javascript页面添加到收藏夹的简单方法
Aug 07 Javascript
用jquery实现的一个超级简单的下拉菜单
May 18 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
探寻Javascript执行效率问题
Nov 12 Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
vue 中swiper的使用教程
May 22 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+Html+缓存
2006/12/20 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
浅谈jquery设置和获得checkbox选中的问题
2016/08/19 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
node跨域请求方法小结
2017/08/25 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
vue项目移动端实现ip输入框问题
2019/03/19 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python中return语句用法实例分析
2015/08/04 Python
更换Django默认的模板引擎为jinja2的实现方法
2018/05/28 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
python 自定义装饰器实例详解
2019/07/20 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
法院先进个人事迹材料
2014/05/04 职场文书
百日宴上的祝酒词
2015/08/10 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python