Articles → ANGULAR.JS → Filters in angular.js
Filters in angular.js
| Filter | Description |
| Uppercase | Change the string to upper case |
| Lowercase | Change the string to lowercase |
| Currency | Prefixed dollar ($) with the string or number |
| orderBy | Sort array. |
| Filter | Filters data |
uppercase and lowercase
<div ng-app="">
Convert my string to upper and lowercase
<input type="text" ng-model="Name" /><br />
UpperCase:{{Name | uppercase}}<br />
LowerCase:{{Name | lowercase}}<br />
</div>
Click to Enlarge
Currency
<div ng-app="">
Please enter the expense <input type="text" ng-model="expense" /><br />
Expense:{{expense | currency}}<br />
</div>
Click to Enlarge
orderBy
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('myController', function ($scope) {
$scope.Fruits = [
{ Name: "Banana", Price: 12 },
{ Name: "Apple", Price: 14 },
{ Name: "Orange", Price: 13 }
];
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="app" ng-controller="myController">
<ul>
<li ng-repeat="fruit in Fruits|orderBy:'Price'">{{fruit.Name}}</li>
</ul>
</div>
</form>
</body>
</html>
Click to Enlarge
filter
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.controller('myController', function ($scope) {
$scope.Fruits = [
{ Name: "Banana", Price: 12 },
{ Name: "Apple", Price: 14 },
{ Name: "Orange", Price: 13 }
];
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="app" ng-controller="myController">
<input type="text" ng-model="filterFruits" />
<br />
<ul>
<li ng-repeat="fruit in Fruits | filter: filterFruits">{{fruit.Name}} </li>
</ul>
</div>
</form>
</body>
</html>
Click to Enlarge