AngularJS Search Filter Example – onlinecode
In this post we will give you information about AngularJS Search Filter Example – onlinecode. Hear we will give you detail about AngularJS Search Filter Example – onlinecodeAnd how to use it also give you demo for it if it is necessary.
In this tutorial, We will inform you how to search filter in AngularJs. Now, We will learn to search the data in the search detail using the AngularJs.
We will first take a table using the bootstrap and arrange the code like the below example. here below example in we take a user detail array data.
Whenever you will search on the textbox then data return the filter data and display it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Search Filter Example - onlinecode</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("onlinecodeApp", []);
app.controller("onlinecodeCtrl", function ($scope) {
$scope.users = [{
firstname: "John",
lastname: "Doe",
email: "john@gmail.com"
}, {
firstname: "Mary",
lastname: "Moe",
email: "mary@gmail.com"
}, {
firstname: "July",
lastname: "July",
email: "july@gmail.com"
}, {
firstname: "jay",
lastname: "Doe",
email: "jay@gmail.com"
}];
});
</script>
</head>
<body ng-app="onlinecodeApp">
<div >
<div ng-controller="onlinecodeCtrl">
<label for="txtSearch">Search:</label> <input id="txtSearch" ng-model="txtSearch" type="text" placeholder="Here Search">
<table >
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter : txtSearch">
<td>{{user.firstname}}</td>
<td>{{user.lastname}}</td>
<td>{{user.email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>Hope this code and post will helped you for implement AngularJS Search Filter Example – onlinecode. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs