AngularJS过滤器详解及示例代码  更新时间:2016年08月16日 16:42:31   投稿:lqh   本文主要介绍AngularJS过滤器,这里整理了详细的资料和提供了示例代码及实例效果图,有兴趣的小伙伴可以参考下 过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。 S.No. 名称 描述 1 大写 转换文本为大写文本。 2 小写 转换文本为小写文本。 3 货币 货币格式格式文本。 4 过滤器 过滤数组中它根据所提供的标准的一个子集。 5 排序 排序提供标准的基础数组。 大写过滤器 添加大写的过滤器使用管道符的表达式。在这里,添加了大写过滤器,全部用大写字母打印学生姓名。 Enter first name: Enter last name: Name in Upper Case: {{student.fullName() | uppercase}} 小写过滤器 添加小写的过滤器,使用管道符的表达式。在这里添加小写过滤器,以小写字母打印学生姓名。 Enter first name: Enter last name: Name in Upper Case: {{student.fullName() | lowercase}} 货币滤波器 加币过滤器使用管道符返回数的表达式。在这里,我们添加了过滤器,货币使用货币格式的打印费用。 Enter fees: fees: {{student.fees | currency}} 过滤器的过滤器 要仅显示所需的主题,我们使用subjectName作为过滤器。 Enter subject: Subject: {{ subject.name + ‘, marks:’ + subject.marks }} 排序过滤器 要通过标记排序主题,我们使用orderBy标记。 Subject: {{ subject.name + ‘, marks:’ + subject.marks }} 例子 下面的例子将展示上述所有的过滤器。 testAngularJS.html Angular JS Filters AngularJS Sample Application Enter first name: Enter last name: Enter fees: Enter subject: Name in Upper Case: {{student.fullName() | uppercase}} Name in Lower Case: {{student.fullName() | lowercase}} fees: {{student.fees | currency}} Subject: {{ subject.name + ‘, marks:’ + subject.marks }} 输出 在Web浏览器打开textAngularJS.html,看到以下结果: 以上就是AngularJS过滤器的资料整理,后续继续补充相关资料,谢谢大家对本站的支持! 您可能感兴趣的文章: 详解AngularJS中自定义过滤器 AngularJS入门教程之过滤器详解 AngularJS 过滤器的简单实例 AngularJs学习第八篇 过滤器filter创建 深入理解angularjs过滤器 Angularjs过滤器使用详解 AngularJS中的过滤器filter用法完全解析 详解AngularJS过滤器的使用 详解AngularJS中的filter过滤器用法 AngularJS 自定义过滤器详解及实例代码 AngularJS 过滤器 相关文章 AngularJS中使用HTML5手机摄像头拍照 这篇文章主要介绍了AngularJS中使用HTML5手机摄像头拍照的相关资料,需要的朋友可以参考下 2016-02-02 AngularJS中的包含详细介绍及实现示例 本文主要介绍AngularJS 包含,这里对相关资料做了详细整理,并附代码实例和效果图,有需要的朋友可以看一下 2016-07-07 浅谈AngularJS中使用$resource(已更新) 这篇文章主要介绍了浅谈AngularJS中使用$resource(已更新)的相关资料,需要的朋友可以参考下 2017-09-09 详解基于Bootstrap+angular的一个豆瓣电影app 本篇文章主要介绍了基于Bootstrap+angular的一个豆瓣电影app ,非常具有实用价值,需要的朋友可以参考下 2017-06-06 Angular.js初始化之ng-app的自动绑定与手动绑定详解 这篇文章主要给大家介绍了关于Angular.js初始化之ng-app的自动绑定与手动绑定的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。 2017-07-07 Ionic+AngularJS实现登录和注册带验证功能 这篇文章主要介绍了Ionic+AngularJS实现登录和注册带验证功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下 2017-02-02 利用AngularJs实现京东首页轮播图效果 这篇文章给大家介绍了如何利用AngularJs实现京东首页轮播图的效果,本文通过示例代码详细介绍了实现过程,对大家学习AngularJS具有一定参考借鉴价值,有需要的朋友们可以参考借鉴。 2016-09-09 浅谈angular懒加载的一些坑 下面小编就为大家带来一篇浅谈angular懒加载的一些坑。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-08-08 AngularJS中的Directive实现延迟加载 延迟加载通常是直到用户交互时才加载,那么如何实现延时加载的呢?下面通过本文一起学习AngularJS中的Directive实现延迟加载,对angularjs延时加载相关知识感兴趣的朋友一起学习吧 2016-01-01 js常用正则表达式集锦 这篇文章主要介绍了js常用正则表达式集锦,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-05-05 最新评论

过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。

S.No. 名称 描述
1 大写 转换文本为大写文本。
2 小写 转换文本为小写文本。
3 货币 货币格式格式文本。
4 过滤器 过滤数组中它根据所提供的标准的一个子集。
5 排序 排序提供标准的基础数组。

大写过滤器

添加大写的过滤器使用管道符的表达式。在这里,添加了大写过滤器,全部用大写字母打印学生姓名。

Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | uppercase}}

小写过滤器

添加小写的过滤器,使用管道符的表达式。在这里添加小写过滤器,以小写字母打印学生姓名。

Enter first name:<input type="text" ng-model="student.firstName">
Enter last name: <input type="text" ng-model="student.lastName">
Name in Upper Case: {{student.fullName() | lowercase}}

货币滤波器

加币过滤器使用管道符返回数的表达式。在这里,我们添加了过滤器,货币使用货币格式的打印费用。

Enter fees: <input type="text" ng-model="student.fees">
fees: {{student.fees | currency}}

过滤器的过滤器

要仅显示所需的主题,我们使用subjectName作为过滤器。

Enter subject: <input type="text" ng-model="subjectName">
Subject:
<ul>
 <li ng-repeat="subject in student.subjects | filter: subjectName">
  {{ subject.name + ', marks:' + subject.marks }}
 </li>
</ul>

排序过滤器

要通过标记排序主题,我们使用orderBy标记。

Subject:
<ul>
 <li ng-repeat="subject in student.subjects | orderBy:'marks'">
  {{ subject.name + ', marks:' + subject.marks }}
 </li>
</ul>

例子

下面的例子将展示上述所有的过滤器。

testAngularJS.html

<html>
<head>
<title>Angular JS Filters</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<table border="0">
<tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
<tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
<tr><td>Enter fees: </td><td><input type="text" ng-model="student.fees"></td></tr>
<tr><td>Enter subject: </td><td><input type="text" ng-model="subjectName"></td></tr>
</table>
<br/>
<table border="0">
<tr><td>Name in Upper Case: </td><td>{{student.fullName() | uppercase}}</td></tr>
<tr><td>Name in Lower Case: </td><td>{{student.fullName() | lowercase}}</td></tr>
<tr><td>fees: </td><td>{{student.fees | currency}}</td></tr>
<tr><td>Subject:</td><td>
<ul>
  <li ng-repeat="subject in student.subjects | filter: subjectName |orderBy:'marks'">
   {{ subject.name + ', marks:' + subject.marks }}
  </li>
</ul>
</td></tr>
</table>
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fees:500,
   subjects:[
     {name:'Physics',marks:70},
     {name:'Chemistry',marks:80},
     {name:'Math',marks:65}
   ],
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html,看到以下结果:

以上就是AngularJS过滤器的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • 详解AngularJS中自定义过滤器
  • AngularJS入门教程之过滤器详解
  • AngularJS 过滤器的简单实例
  • AngularJs学习第八篇 过滤器filter创建
  • 深入理解angularjs过滤器
  • Angularjs过滤器使用详解
  • AngularJS中的过滤器filter用法完全解析
  • 详解AngularJS过滤器的使用
  • 详解AngularJS中的filter过滤器用法
  • AngularJS 自定义过滤器详解及实例代码
张贴在3