angularjs过滤器 angularjs过滤器|AngularJS教程

本文概述

如何向表达式添加过滤器
如何将过滤器添加到指令
过滤器
根据用户输入过滤数组
根据用户输入对数组排序
AngularJS自定义过滤器

在AngularJS中，过滤器用于格式化数据。以下是用于转换数据的过滤器列表。

过滤	描述
Currency	它将数字格式化为货币格式。
Date	它将日期格式化为指定的格式。
Filter	它从数组中选择项的子集。
Json	它将对象格式化为Json字符串。
Limit	它用于将数组/字符串限制为指定数量的元素/字符。
Lowercase	它将字符串格式化为小写。
Number	它将数字格式化为字符串。
Orderby	它通过表达式对数组进行排序。
Uppercase	它将字符串格式化为大写。

如何向表达式添加过滤器你可以使用竖线字符|，然后是过滤器，将过滤器添加到表达式中。
在此示例中，大写过滤器将字符串格式化为大写：
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="myApp" ng-controller="personCtrl"> < p>The name is {{ firstName | uppercase }}< /p> < /div> < script> angular.module('myApp', []).controller('personCtrl', function($scope) { $scope.firstName = "Sonoo", $scope.lastName = "Jaiswal" }); < /script> < /body> < /html>

让我们将小写过滤器应用于同一示例：
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="myApp" ng-controller="personCtrl"> < p>The name is {{ firstName | lowercase }}< /p> < /div> < script> angular.module('myApp', []).controller('personCtrl', function($scope) { $scope.firstName = "Sonoo", $scope.lastName = "Jaiswal" }); < /script> < /body> < /html>

如何将过滤器添加到指令可以使用管道字符|将过滤器添加到指令（例如ng-repeat），然后使用过滤器。
让我们举个例子：
在此示例中，orderBy过滤器用于对数组进行排序。
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="myApp" ng-controller="namesCtrl"> < p>Looping with objects:< /p> < ul> < li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} < /li> < /ul> < /div> < script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Ramesh', country:'India'}, {name:'Alex', country:'USA'}, {name:'Pooja', country:'India'}, {name:'Mahesh', country:'India'}, {name:'Iqbal', country:'Pakistan'}, {name:'Ramanujam', country:'India'}, {name:'Osama', country:'Iraq'}, {name:'Johnson', country:'UK'}, {name:'Karl', country:'Russia'} ]; }); < /script> < /body> < /html>

过滤器筛选器筛选器只能在数组上使用，因为它会选择数组的一个子集。它返回仅包含匹配项的数组。
让我们举个例子：
本示例将返回包含字母“ o”的名称。
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="myApp" ng-controller="namesCtrl"> < ul> < li ng-repeat="x in names | filter : 'o'"> {{ x }} < /li> < /ul> < /div> < script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ 'Ramesh', 'Pooja', 'Mahesh', 'Ramanujam', 'Osama', 'Iqbal', 'Karl', 'Johnson', 'Alex' ]; }); < /script> < p>This example displays only the names containing the letter "o".< /p> < /body> < /html>

根据用户输入过滤数组通过在输入字段上设置ng-model指令，可以将输入字段的值用作过滤器中的表达式。
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < div ng-app="myApp" ng-controller="namesCtrl"> < p>Type a letter in the input field:< /p> < p>< input type="text" ng-model="test">< /p> < ul> < li ng-repeat="x in names | filter:test"> {{ x }} < /li> < /ul> < /div> < script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ 'Ramesh', 'Pooja', 'Mahesh', 'Ramanujam', 'Osama', 'Iqbal', 'Karl', 'Johnson', 'Alex' ]; }); < /script> < p>The list will only contain the names matching the filter.< /p> < /body> < /html>

根据用户输入对数组排序你可以根据表列对数组进行排序。
请参阅以下示例：

< !DOCTYPE html> < html> < script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">< /script> < body> < p>Click the table headers to change the sorting order:< /p> < div ng-app="myApp" ng-controller="namesCtrl"> < table border="1" width="100%"> < tr> < th ng-click="orderByMe('name')">Name< /th> < th ng-click="orderByMe('country')">Country< /th> < /tr> < tr ng-repeat="x in names | orderBy:myOrderBy"> < td>{{x.name}}< /td> < td>{{x.country}}< /td> < /tr> < /table> < /div> < script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Ramesh', country:'India'}, {name:'Alex', country:'USA'}, {name:'Pooja', country:'India'}, {name:'Mahesh', country:'India'}, {name:'Iqbal', country:'Pakistan'}, {name:'Ramanujam', country:'India'}, {name:'Osama', country:'Iraq'}, {name:'Johnson', country:'UK'}, {name:'Karl', country:'Russia'} ]; $scope.orderByMe = function(x) { $scope.myOrderBy = x; } }); < /script> < /body> < /html>

AngularJS自定义过滤器你可以通过在模块中注册新的过滤器工厂功能来创建自己的过滤器。
【angularjs过滤器】请参阅以下示例：