In this article I'll explain you how to use search filter in Angular Js.
First let's take a at look the code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-controller="MyCtrl">
<input type="text" placeholder="Enter the name of
student" ng-model="Search" /> <br /><br />
<table border="1">
<tr>
<th>Name</th>
<th>Gender</th>
<th>City</th>
</tr>
<tr ng-repeat="student in Students| filter:Search">
<td>{{student.name}}</td>
<td>{{student.Gender}}</td>
<td>{{student.City}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("MyCtrl", function ($scope) {
$scope.Students = [
{ name: "Rohit", Gender: "Male", City: "Gurugram" },
{ name: "Akshay", Gender: "Male", City: "Delhi" },
{ name: "Ananya", Gender: "Female", City: "Noida" },
{ name: "Mehak", Gender: "Female", City: "Faridabaad" },
{ name: "Rahul", Gender: "Male", City: "Gurugram" },
{ name: "Jyoti", Gender: "Female", City: "Panipat" },
];
});
</script>
</body>
</html>
Explanation of above code: Whenever we type anything in text box the search will done across all columns if we want to perform the same search functionality on any specific column then simply do like this:
<input type="text" placeholder="Enter the name of student" ng-model="Search.City" />
Now, the search will done checking all the cities of students.
No comments:
Post a Comment