Let's see with an example:
Step 1: This is going to be the structure.Include angular.js or angular.min.js file. The file circled are going to be used.
Step 5: Let's run the application
Step 1: This is going to be the structure.Include angular.js or angular.min.js file. The file circled are going to be used.
Step 2: In Stylesheet1.css
table {
border-collapse: collapse;
font-family: Arial;
}
td {
border: 1px solid black;
padding: 5px;
}
th {
border: 1px solid black;
padding: 5px;
text-align: left;
cursor: pointer;
}
Step 3: In Filter.js
///
<reference path="angular.min.js" />
var myapp = angular
.module("AngularModule", [])
.filter("experiance", function () {
return function (experiance)
{
if (experiance > 3) {
return "Yes";
}
else {
return "No";
}
}
})
.controller("AngularController", function ($scope) {
var employees = [
{ firstName: "Sanjeet",
lastName: "Singh", Gender: "Male", DateOfBirth: "23/07/1991", Salary: 31000,Experiance:2 },
{ firstName: "Sarah",
lastName: "Singhania", Gender: "Female", DateOfBirth: "11/04/1990", Salary: 35000, Experiance: 4 },
{ firstName: "Tanuj",
lastName: "Joshi", Gender: "Male", DateOfBirth: "06/12/1992", Salary: 22000, Experiance: 5 },
{ firstName: "Aaina",
lastName: "Tyagi", Gender: "Female", DateOfBirth: "07/07/1993", Salary: 26000, Experiance: 1 },
];
$scope.employees = employees;
});
Step 4: In Filter.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="AngularModule">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Filter.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body ng-controller="AngularController">
<input type="text" ng-model="searchText.firstName" placeholder="Search By firstName" />
<input type="text" ng-model="searchText.lastName" placeholder="Search By lastName" />
<input type="text" ng-model="searchText.Gender" placeholder="Search By Gender" />
<input type="text" ng-model="searchText.DateOfBirth" placeholder="Search By DateOfBirth" /><br /><br />
<input type="checkbox" ng-model="completeMatch" />Match Complete Text
<input type="checkbox" ng-model="hideSalary" />Hide Salary
<input type="checkbox" ng-model="hideExperiance" />Hide Experiance
<input type="checkbox" ng-model="maskDOB" />Mask Date Of Birth
<br /><br />
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th ng-hide="maskDOB">Date Of Birth</th>
<th ng-show="maskDOB">Date Of Birth</th>
<th ng-hide="hideSalary">Salary</th>
<th ng-show="!hideExperiance">Experiance > 3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in
employees | filter:searchText:completeMatch">
<td>{{employee.firstName}}</td>
<td>{{employee.lastName}}</td>
<td>{{employee.Gender}}</td>
<td ng-hide="maskDOB">{{employee.DateOfBirth}}</td>
<td ng-show="maskDOB">######</td>
<td ng-hide="hideSalary">{{employee.Salary}}</td>
<td ng-show="!hideExperiance">{{employee.Experiance | experiance}}</td>
</tr>
</tbody>
</table>
</body>
</html>
Filtering By Name
Filtering with Compete text Check
Filtering with Compete text Check
Hiding Salary Column
Hiding Salary and Experience column
Masking Date Of Birth
Posts
0 comments:
Post a Comment