<html>
<head>
<title>AngularJS Filters</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('studentController', function($scope) {
$scope.employee = {
firstName: "Anil",
lastName: "Singh",
fees: 500000,
subjects: [{
name: 'Computer Science',
marks: 92
}, {
name: 'Science',
marks: 85
}, {
name: 'Maths',
marks: 95
}],
fullName: function() {
var studentObject = $scope.employee;
return studentObject.firstName + " " + studentObject.lastName;
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="studentController">
<h2>AngularJS filter example</h2>
<div>
<table border="0">
<tr>
<td>
First Name:
<input type="text" ng-model="employee.firstName">
</td>
</tr>
<tr>
<td>
Last Name:
<input type="text" ng-model="employee.lastName">
</td>
</tr>
<tr>
<td>
Fees:
<input type="text" ng-model="employee.fees">
</td>
</tr>
<tr>
<td>
Filter Key:
<input type="text" ng-model="subjectName">
</td>
</tr>
</table>
<br/>
<table border="1">
<tr>
<td>Display Upper Case:</td>
<td>{{employee.fullName() | uppercase}}</td>
</tr>
<tr>
<td>Display Lower Case:</td>
<td>{{employee.fullName() | lowercase}}</td>
</tr>
<tr>
<td>Fees:</td>
<td>{{employee.fees | currency}}</td>
</tr>
<tr>
<td>Subject:</td>
<td>
<ul>
<li ng-repeat="emp in employee.subjects | filter: subjectName | orderBy:'marks'">
{{ emp.name + ', Marks:' + emp.marks }}
</li>
</ul>
</td>
</tr>
</table>
</div>
</body>
</html>
// Code goes here
/* Styles go here */