Script.js :
var app = angular
.module("myModule", [])
.co ntroller("myController", function($scope) {
< div style="margin-bottom:.0001pt;">
var employees = [
{ name: "Ben", gender: "Male", salary: 55000, city: "London" },
  ; { name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
{ name: "Mark", gender: "Male", salary: 57000, city: "London" },
{ name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
{ name: "Todd", gender: "Male", salary: 60000, city: "London" },
];
$scope.employees = employees;
});
HtmlPage1.html :
<!DOCTYPE html>
<html xmlns="http:// www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<input type="text" placeholder="Search name" ng-model="searchText.name" />
<input type="text" placeholder="Search city" ng-model="searchText.city" />
<input type="checkbox" ng-model="exactMatch" /> Exact Match
<br /><br />
<table>
<thead>
<tr>
<< /span>th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
&nbs p; </thead>
<tbody>
<tr ng-repeat="employee in employees | filter: searchText : exactMatch">
<td> {{ employee.name }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary< /span> }} </td>
<td> {{ employee.city }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Styles.css
body {
font-family: Arial;
}
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 5px;
}
th {
border: 1px solid black;
padding: 5px;
text-align: left;
}
The following example has a single search textbox, and is used to search multiple properties - name and city.
Script.js :
var app = angular
.module("myModule", [])
.controller("myController", function($scope) {
var employees = [
{ name: "Ben", gender: "Male", salary: 55000, city: "London"
},
{ name: "Sara", gender: "Female", salary: 68000, city: "Chennai" },
{ name: "Mark", gender: "Male", salary: 57000, city: "London" },
{ name: "Pam", gender: "Female", salary: 53000, city: "Chennai" },
&nb sp; { name: "Todd", gender: "Male", salary: 60000, city: "London" },
];
$scope.employees = employees;
$scope.search = function (item) {
if ($scope.searchText == undefined) {
return true;
}
else {
if (item.city.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1 ||
item.name.toLowerCase()
.indexOf($scope.searchText.toLowerCase()) != -1) {
return true;
}
}
return false;
};
});
HtmlPage1.html :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
< /span><title></title>
<script src="Scripts/angular.min.js"></script>
<script src="Scrip ts/Script.js"></script>
<link href="Styles.css" rel="stylesheet" />
</head>
<body ng-app="myModule">
<div ng-controller="myController">
Search : <input type ="text" placeholder="Search city & name"
ng-model="searchText" />
<br /><br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Gender</th>
<th>Salary</th>
<th>City</th>
</tr>
</thead>
<tbody>
&n bsp; <tr ng-repeat="employee in employees | filter: search">
<td> {{ employee.name }} </td>
<td> {{ employee.gender }} </td>
<td> {{ employee.salary }} </td>
& nbsp; <td> {{ employee.city }} </td>
</tr>
</tbody>
</table>
</div>
</body>
0 comments :
Post a Comment