AngularJS filters



Filters can be added to expressions and directives using a pipe character (|).


AngularJS Filters

AngularJS filters can be used to transform data:

##FilterDescription currencyFormat the number in currency format. filterSelects a subset from array items. lowercaseFormat the string to lowercase. orderByOrder an array based on an expression. uppercaseFormat string to uppercase.

Add filters to expressions

Filters can be added to expressions by passing a pipe character (|) and a filter. .

((For the following two examples, we will use the person controller mentioned in the previous chapter))

uppercase The filter formats the string as Capital letters:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | uppercase }}</p>

</div>

<script src="personController.js"></script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

lowercase Filter formats strings to lowercase:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="personCtrl">

<p>姓名为 {{ lastName | lowercase }}</p>

</div>

<script src="personController.js"></script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance


currency filter

currency Filter formats numbers into currency format:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="costCtrl">

数量: <input type="number" ng-model="quantity">
价格: <input type="number" ng-model="price">

<p>总价 = {{ (quantity * price) | currency }}</p>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('costCtrl', function($scope) {
    $scope.quantity = 1;
    $scope.price = 9.99;
});
</script>

</body>
</html>

Run Example»

Click the "Run Instance" button to view the online instance



Add a filter to the command

Filter Can be added to the directive via a pipe character (|) and a filter.

orderBy Filter sorts the array based on expression:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>循环对象:</p>
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance


Filter input

The input filter can be passed through a pipe character ( |) and a filter added to the directive followed by a colon and a model name.

filter Filter selects a subset from an array:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="namesCtrl">

<p>输入过滤:</p>

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter:test | orderBy:'country'">
    {{ (x.name | uppercase) + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance