<DOCTYPE html>
<html>
<head>
<meta CHARSET="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>Filters (uppercase, lowercase, currency, filter, Custom filter)</h2>
<fieldset>
<legend>
Uppercase
</legend>
<div ng-init='name = {"first_name":"Shailesh"}'>
{{name.first_name| uppercase}}
</div>
</fieldset>
<fieldset>
<legend>
Lowercase
</legend>
<div ng-init='month = {"first":"january"}'>
{{month.first| lowercase}}
</div>
</fieldset>
<fieldset>
<legend>
Currency
</legend>
<div ng-init='currency = {"inr": 20000, "usd":30000, "euro": 25000}'>
<!-- {{ currency_expression | currency : symbol : fractionSize}} -->
{{currency.inr| currency : ' ₹' : 3}} <br/>
{{currency.usd| currency}} <br/>
{{currency.euro| currency : '€'}}
</div>
</fieldset>
<fieldset>
<legend>
Single Filter
</legend>
<div ng-init='city = ["Mumbai", "Pune", "Nagpur"]'>
<table border="1">
<ul>
<li ng-repeat="x in city">
{{x}}
</li>
</ul>
</table>
</div>
</fieldset>
<fieldset>
<legend>
Multiple Filter
</legend>
<div>
Search by any <input type="text" name="" ng-model="search.$"/> <br/>
Search by Name <input type="text" name="" ng-model="search.name"/> <br/>
Search Country <input type="text" name="" ng-model="search.country"/> <br/>
<table border="1">
<tr ng-repeat="x in emp_records| filter:search">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
<td>{{x.age}}</td>
</tr>
</table>
</div>
</fieldset>
<fieldset>
<legend>
Multiple Filter Skip Few
</legend>
<div>
Search by Name or Country Only <input type="text" name="" ng-model="query"/> <br/>
<table border="1">
<tr ng-repeat="x in emp_records| filter:search2">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
<td>{{x.age}}</td>
</tr>
</table>
</div>
</fieldset>
</body>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.emp_records = [
{name: 'Jani', country: 'Norway', 'age': 20},
{name: 'Carl', country: 'Sweden', 'age': 21},
{name: 'Margareth', country: 'England', 'age': 22},
{name: 'Hege', country: 'Norway', 'age': 23},
{name: 'Joe', country: 'Denmark', 'age': 24},
{name: 'Gustav', country: 'Sweden', 'age': 25},
{name: 'Birgit', country: 'Denmark', 'age': 26},
{name: 'Mary', country: 'England', 'age': 27},
{name: 'Kai', country: 'Norway', 'age': 28}
];
$scope.search2 = function (row) {
return (angular.lowercase(row.name).indexOf(angular.lowercase($scope.query) || '') !== -1 ||
angular.lowercase(row.country).indexOf(angular.lowercase($scope.query) || '') !== -1);
};
});
</script>
</html>