AngularJS基础知识笔记之过滤器  更新时间:2015年05月10日 11:04:20   投稿:hebedich   在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化,才能显示给用户。比如时间本地化,或者yyyy-MM-dd HH:mm:ss格式,数字精度格式化,本地化,人名格式化等等。在angularjs中为我们提供了叫filter的指令,让我们能够很轻易就能做到着一些列的功能 过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。 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 }} 以上所述就是本文的全部内容了,希望大家能够喜欢。 您可能感兴趣的文章: 详解AngularJS中的filter过滤器用法 AngularJS的内置过滤器详解 详解AngularJS中自定义过滤器 详解AngularJS Filter(过滤器)用法 AngularJS 过滤器(自带和自建)详解 详解AngularJS中$filter过滤器使用(自定义过滤器) Angularjs之filter过滤器(推荐) AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制) 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例 AngularJS 过滤器的简单实例 Angularjs 依赖压缩及自定义过滤器写法 AngularJS常见过滤器用法实例总结 AngularJS 过滤器 相关文章 Angularjs 事件指令详细整理 这篇文章主要介绍了Angularjs 事件指令详细整理的相关资料,这里对AngularJS 的所有的事件指令一一做出详细介绍,需要的朋友可以参考下 2017-07-07 Angular 多模块项目构建过程 这篇文章主要介绍了Angular 多模块项目构建过程,本文大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2020-02-02 Angular 2.0+ 的数据绑定的实现示例 本篇文章主要介绍了Angular 2.0+ 的数据绑定的实现实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 angular基于路由控制ui-router实现系统权限控制 这篇文章主要介绍了angular基于路由控制ui-router实现系统权限控制的相关资料,需要的朋友可以参考下 2016-09-09 AngularJS自定义控件实例详解 这篇文章主要介绍了AngularJS自定义控件,结合实例形式详细分析了AngularJS自定义指令与模板操作的相关函数与使用技巧,需要的朋友可以参考下 2016-12-12 Angular.js实现获取验证码倒计时60秒按钮的简单方法 最近做项目的时候又遇到了验证码倒计时的需求,发现这个功能还是挺实用的,所以就想着总结一下,下面这篇文章主要给大家介绍了关于利用Angular.js如何实现获取验证码倒计时按钮的简单方法,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-10-10 详解Angular结合zTree异步加载节点数据 本篇文章主要给大家分享了Angular结合zTree异步加载节点数据的难点以及方法,有这方面需求的朋友参考下吧。 2018-01-01 详解Angular路由动画及高阶动画函数 本文主要讲解了Angular的路由动画和高阶动画函数,对此感兴趣的同学,可以把代码亲自实验一下,理解其原理。 2021-05-05 Angular4学习教程之DOM属性绑定详解 这篇文章主要给大家介绍了关于Angular4学习教程之DOM属性绑定的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。 2018-01-01 Angularjs过滤器使用详解 AngularJS提供了过滤器来对输入输出数据格式化。这篇文章主要介绍了Angularjs过滤器使用的相关资料,需要的朋友可以参考下 2016-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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

您可能感兴趣的文章:

  • 详解AngularJS中的filter过滤器用法
  • AngularJS的内置过滤器详解
  • 详解AngularJS中自定义过滤器
  • 详解AngularJS Filter(过滤器)用法
  • AngularJS 过滤器(自带和自建)详解
  • 详解AngularJS中$filter过滤器使用(自定义过滤器)
  • Angularjs之filter过滤器(推荐)
  • AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
  • AngularJS 过滤器的简单实例
  • Angularjs 依赖压缩及自定义过滤器写法
  • AngularJS常见过滤器用法实例总结
张贴在3