Today we are going to see how to add the search functionality in the angular js. To add the search functionality in angular we are making use of the filters in angular js.There are also different types of filters available in angular. please do check Angular Docs what are the other different types of filters available for angular js and how we can use it in our application. So let’s start
<html data-ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<script>
var app = angular.module('app', []);
app.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.items = [
{
name: "ram",
age: "23"
},
{
name: "vijay",
age: "25"
},
{
name: "sham",
age: "24"
},
{
name: "raju",
age: "59"
},
{
name: "babu j",
age: "20"
},
{
name: "kml r",
age: "12"
}
]
}]);
</script>
</head>
<body>
<h1 class="page-header" style="text-align:center">Basic Angular App</h1>
<div class="container" data-ng-controller="MyCtrl">
<div>
<div class="col-sm-2">Search</div>
<div class="col-sm-2">
<input type="text" class="form-control input-sm" data-ng-model="txtSearch">
</div>
</div>
<hr>
<table class="table table-responsive table-hover">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr data-ng-repeat="item in items | filter : txtSearch">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
</body>
</html>
In the above example we have used the angular js directive known as data-ng-repeat which works same like the foreach loop in the above we have also created the controller named MyCtrl and inside the controller we have created the array called as items [] which stores the JSON data which we have used to bind the table In the data-ng-repeat you can see that we have made use of the filter keyword that is nothing but the angular js filter in that we are just passing the model name of the search text box and it will automatically search the results based on the input entered in the text box so by that way we can easily create the search functionality in the angular js.
No comments:
Post a Comment