AngularJS过滤器示例教程
我们在上一篇文章中介绍了View Model，View和Controller概念。
现在，我们将讨论AngularJS过滤器。
内容
- AngularJS过滤器概念
- AngularJS过滤器的作用
AngularJS过滤器概念
过滤器用于格式化表达式的值以显示给用户。
可以将它们添加到模板，控制器，指令或者服务中，还可以定义自己的过滤器。
使用过滤器，Angular可以组织数据，以便仅在满足某些条件时才显示数据。
我们使用竖线(|)字符添加Angular滤镜。
我们将在"动作中的Angular过滤器"部分中看到过滤器的使用。
下表简要介绍了常用的Angular过滤器。
| 角度过滤器 | 描述 |
|---|---|
| filter | |
| currency | 将数字格式化为货币格式 |
| number | 用于格式化数字。 |
| date | 根据请求的格式将日期格式化为字符串。 |
| json | 将JavaScript对象转换为JSON |
| lowercase | 将字符串转换为小写。 |
| uppercase | 将字符串转换为大写 |
| limitTo | 创建仅包含指定数量的元素的新数组或字符串。 |
| orderBy | 通过表达式对数组进行排序。 |
AngularJS过滤器的作用
我们将在本节中看到Angular滤镜的使用。
大写和小写
以下示例演示了在AngularJS中使用大写和小写过滤器。
filter-case.html
<!DOCTYPE html>
<html>
<head>
<title> Filter - Uppercase and Lowercase</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="BlogController">
Name: <input type="text" ng-model="name"><br>
Blog Name: <input type="text" ng-model="blogName"><br>
<br>
Name: {{name | uppercase}}
<br>
Blog Name : {{blogName | lowercase}}
</div>
<script src="blogController.js"></script>
</body>
</html>
在此示例中使用以下控制器。
我们通过使用大小写字母附加属性来设置范围的初始状态。
blogController.js
function BlogController($scope) {
$scope.name = "pankaj kumar",
$scope.blogName = "JOURNAL DEV"
}
货币
以下示例演示了AngularJS中货币过滤器的用法。
filter-currency.html
<!DOCTYPE html>
<html ng-app>
<head>
<title> Angular Filter - Currency</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-controller="currencyController">
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p> Toal Default = {{ (quantity * price) | currency }}</p>
<p>Total in INR = {{ (quantity * price) | currency :"INR " }}</p>
</div>
<script src="currencyController.js"></script>
</body>
</html>
在此示例中使用以下控制器。
我们通过将属性数量和价格分别附加值1和10来设置范围的初始状态。
currencyController.js
function currencyController($scope) {
$scope.quantity = 1;
$scope.price = 10;
}
您将在浏览器中看到以下输出。
默认货币格式为USD($)。
使用orderby和filter
以下示例演示了如何使用" orderby"和" filter"之类的Angular过滤器。
我们使用orderby过滤器按照给定的表达式对玩家数组进行排序。
在此示例中，我们使用名称对玩家数组进行排序。
字符串按字母顺序排列，数字按数字顺序排列。
我们使用过滤器从玩家的对象数组中选择项的子集，然后返回与过滤器表达式匹配的新数组。
在此示例中，您可以看到输入时filter的工作方式。
filter-orderby.html
<!DOCTYPE html>
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-controller="playerController">
Name:<input type='text' ng-model='filterName'
<ul>
<li ng-repeat="player in players |filter:filterName | orderBy:'name'">
{{ player.name + ' : ' + player.country }}
</li>
</ul>
</div>
<script src="playerController.js"></script>
</body>
</html>
在上面的示例中，我们使用以下控制器。
playerController.js
function playerController($scope) {
$scope.players = [ {name:'Elano Blumer',country:'Brazil'},
{name:'David James',country:'England'},
{name:'Iain Hume',country:'Canada'}
];
}
您将在浏览器中看到以下输出。
您可以在输入字段中键入以过滤列表。
使用limitTo
我们使用limitTo过滤器来创建一个仅包含指定数量元素的新数组或者字符串。
下面的示例演示了limitlimit过滤器的用法
filter-limit.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>Angular Filter - limiTo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
</head>
<body>
<div ng-controller="limitController">
Defined Array of Numbers: {{numbers}}<br>
<br>Limit to:
<input type="integer" ng-model="limit">
<p>Array after limiting to {{limit}} numbers : {{ numbers | limitTo:limit }}</p>
<p>{{xss}}</p>
</div>
</body>
<script src="limitController.js"></script>
</html>
在示例中，我们使用以下控制器。
limitController.js
function limitController($scope) {
$scope.numbers = [10,20,30,40,50,60,70,80,90,100];
$scope.limit = 5;
}
