<html>
<head>
<meta charset='utf-8'>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="myApp">
<div ng-controller=" MyCtrl">
<h3> Filter by String </h3>
<form>
<input ng-model="stringname" type=" text" placeholder="filter by name">
</form>
<ul ng-repeat="friend in friends | filter: stringname | orderBy: 'name'">
<li>{{friend.name}} {{friend.age}}</li>
</ul>
</div>
<div ng-controller="MyCtrl">
<h3>Filter by Object</h3>
<form>
<input type=" text" ng-model="query" placeholder="filter by name and age = 22">
</form>
<ul ng-repeat=" friend in friends| filter:{name:query, age:'22'}| orderBy:'name'">
<li>{{friend.name}} {{friend.age}}</li>
</ul>
</div>
<div ng-controller="MyCtrl">
<h3>Custom Filter</h3>
<ul ng-repeat="friend in friends | filter: filterFunction | orderBy: 'name' ">
<li>{{friend.name}} ({{friend.age}})</li>
</ul>
</div>
</body>
</html>
var app = angular.module("myApp",[]);
app.controller("MyCtrl", function($scope){
$scope.friends = [
{name: "Teddy", age: 20},
{name: "Myra", age: 22},
{name: "Harry", age: 43},
{name: "Chloe", age: 12},
{name: "Hannah", age: 23},
{name: "Anna", age: 22},
{name: "Danny", age: 22},
{name: "Lisa", age: 22},
{name: "Marry", age: 22},
{name: "Malus", age: 22},
];
$scope.filterFunction = function(element) {
return element.name.match(/^Ma/) ? true : false;
};
});