AngularJS常见过滤器用法实例总结
本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
相关文章
这篇文章主要介绍了AngularJS过滤器filter用法,结合实例形式分析了过滤器filter的定义与使用技巧,需要的朋友可以参考下2016-11-11
这篇文章主要为大家介绍了Angular本地存储安全分析详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
本篇文章主要介绍了AngularJS ng-repeat遍历输出的用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
Commands Queries设计模式提高Angular应用性能及可维护性
在Angular应用开发领域,Commands and Queries 设计模式是一个关键的概念,它有助于有效地管理应用程序的状态和与后端的交互,本文将深入探讨这一设计模式的核心要点,并通过实际示例来加以说明2023-10-10
这篇文章主要介绍了Angular2.0实现modal对话框的方法,结合实例形式分析了angular2.0实现modal对话框的样式、界面及功能等相关操作技巧,需要的朋友可以参考下2018-02-02
这篇文章主要为大家详细介绍了AngularJS中的http拦截，$http服务允许我们与服务端交互，有时候我们希望在发出请求之前以及收到响应之后做些事情。即http拦截,需要的朋友可以参考下2016-02-02
今天小编就为大家分享一篇angular4强制刷新视图的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
使用AngularJS的过滤器，可以很容易的实现在表格中，点击某一列标题进行排序，实现代码也很简单，下面小编给大家分享angularjs实现表格按指定列排序的实现代码，需要的的朋友参考下吧2017-06-06
在 Angular 中使用 ViewChild 访问子组件、指令或 D
这篇文章主要介绍了如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素,在本教程中,您使用了 ViewChild 来从父组件类中访问指令、子组件和 DOM 元素,需要的朋友可以参考下2024-08-08
本篇文章主要介绍了AngularJs常用的过滤器。具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
最新评论