首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:14:47
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选