Search each column using filters in angularjs

Tsurendra690-29180
Posted by Tsurendra690-29180 under AngularJS category on | Points: 40 | Views : 772
Here is the complete code to search each column separately using angularjs
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>AngularJS Application</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
th {
text-align: center;
background-color: #a99649;
}

body {
padding-left: 100px;
padding-top: 20px;
}

.stripped {
color: black;
background-color: silver;
}
</style>
</head>
<body ng-controller="myctrl">
<div class="container">
<table style="width:50%;" border="1" class="table table-bordered table-hover table-stripped">

<tr>
<th>Index</th>
<th>Name</th>
<th>City</th>
<th>Salary</th>
<th>Age</th>
</tr>
<tr>
<td></td>
<td><input type="text" ng-model="record.Name" class="form control" placeholder="Enter Name" /></td>
<td><input type="text" ng-model="record.City" class="form control" placeholder="Enter City" /></td>
<td><input type="text" ng-model="record.Salary" class="form control" placeholder="Enter Salary" /></td>
<td><input type="text" ng-model="record.Age" class="form control" placeholder="Enter Age" /></td>
</tr>
<tr ng-repeat="record in collection |myFilter:record" ng-class-even="'stripped'">
<td>{{$index+1}}</td>
<td>{{record.Name}}</td>
<td>{{record.City}}</td>
<td>{{record.Salary}}</td>
<td>{{record.Age}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myapp', []);
app.controller('myctrl', function ($scope) {
$scope.collection = [
{ Name: 'Dhoni', City: 'Simla', Salary: '5000', Age: '24' },
{ Name: 'Kohli', City: 'Manali', Salary: '15000', Age: '28' },
{ Name: 'Virat', City: 'Rajasthan', Salary: '35000', Age: '32' },
{ Name: 'Yuvraj', City: 'Kerala', Salary: '35000', Age: '26' },
{ Name: 'Singh', City: 'Mysore', Salary: '35000', Age: '29' },
{ Name: 'Murali', City: 'OOTY', Salary: '20000', Age: '32' },
{ Name: 'Vijay', City: 'Goa', Salary: '20000', Age: '35' },
{ Name: 'Manoj', City: 'Delhi', Salary: '15000', Age: '22' },
{ Name: 'Uday', City: 'Banglore', Salary: '20000', Age: '23' }
];
});
app.filter('myFilter', function ($filter) {
return function (collection, filters) {
if (filters == null) {
return collection;
}
var filteredData;
filteredData = $filter('filter')(collection, function (record) {
var MatchName = false; City = false; Salary: false; Age: false;
if (filters.Name != null && filters.Name.length > 0) { MatchName = record.Name.toUpperCase().indexOf(filters.Name.toUpperCase()) > -1; } else { MatchName = true; }
if (filters.City != null && filters.City.length > 0) { MatchCity = record.City.toUpperCase().indexOf(filters.City.toUpperCase()) > -1; } else { MatchCity = true; }
if (filters.Salary != null && filters.Salary.length > 0) { MatchSalary = record.Salary.toUpperCase().indexOf(filters.Salary.toUpperCase()) > -1; } else { MatchSalary = true; }
if (filters.Age != null && filters.Age.length > 0) { MatchAge = record.Age.toUpperCase().indexOf(filters.Age.toUpperCase()) > -1; } else { MatchAge = true; }
return MatchName && MatchCity && MatchSalary && MatchAge;
});
return filteredData;
};
});
</script>
</body>
</html>

Comments or Responses

Posted by: Manideepgoud on: 12/29/2016 Level:Starter | Status: [Member] | Points: 10
Hai Surendra seeing u after long time,

Its working

Posted by: Nandkishorre on: 12/29/2016 Level:Starter | Status: [Member] | Points: 10
Hi Surendra, Now, Is it working Properly ?

Login to post response