AngularJS中的过滤器使用详解
过滤器是用来更改修改数据，并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。
小写过滤器
添加小写的过滤器，使用管道符的表达式。在这里添加小写过滤器，以小写字母打印学生姓名。
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过滤器的使用的使用技巧和注意事项，需要的朋友参考一下 AnularJS的过滤器用来格式化需要展示给用户的数据，有很多实用的内置过滤器，也可以自己编写。 在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串 转换成大写，可以对字符串中的每个字符都单独进行转换操作，也可以使用过滤器： {{
-
本文向大家介绍详解AngularJS中$filter过滤器使用(自定义过滤器)，包括了详解AngularJS中$filter过滤器使用(自定义过滤器)的使用技巧和注意事项，需要的朋友参考一下 1.内置过滤器 2.自定义过滤器 套用上面的格式定义两个简单的自定义过滤器一个带条件的，一个不带条件的。 （1）【不带条件】，功能：固定转换（有时候项目中会遇到角色代号，门店编码什么的，但是显示的时候
-
本文向大家介绍详解Angularjs filter过滤器，包括了详解Angularjs filter过滤器的使用技巧和注意事项，需要的朋友参考一下 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点。这篇简单说一下angularjs的filter功能，a
-
本文向大家介绍详解AngularJS中自定义过滤器，包括了详解AngularJS中自定义过滤器的使用技巧和注意事项，需要的朋友参考一下 过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。ng内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子
-
过滤器可用在任何api或者ng.$rootScoe.Scope的执行过程中，不过一般用来格式化绑定在模板中的表达式。 \{\{ expression | filter \}\} 过滤器一般在处理过程中将数据转变成新的格式。它能使用链式风格，还能接受附加参数。 你可以像下面这样使用链式风格： \{\{ expression | filter1 | filter2 \}\} 你也可以使用“:”来传
-
主要内容：AngularJS 过滤器,表达式中添加过滤器,AngularJS 实例,AngularJS 实例,currency 过滤器,AngularJS 实例,向指令添加过滤器,AngularJS 实例,过滤输入,AngularJS 实例,自定义过滤器,AngularJS 实例过滤器可以使用一个管道字符（|）添加到表达式和指令中。 AngularJS 过滤器 AngularJS 过滤器可用于转换数据： 过滤器 描述 currency 格式化数字为货币格式。 filter 从数组项中选择一个子集