How do I create angularjs search filter

Published November 03, 2022

To collect user-requested data, angularJs uses various filters. It simplifies the web app. The filter formats database or user input data. Here, all type of data displays where the given keyword is available in the value. We must search for the required value of the entire web page or table.

The filter keyword helps to search or filter data.

• Filter: Select a subset of the array's values with this filter.

Syntax

The filter formats data using html elements. This output HTML element has value and a bar or line.

Use this syntax to use any AngularJS filter with value in an expression.

</tr>

<td>{{x.value}}</td>

</tr>

Example To create Angularjs Search filter

The given example shows filter format data using the search tab. Here, we use one tab to search or filter values.

<!DOCTYPE html>

<html>

<head>

<style>

table, th , td {

border: 1px solid black;

border-collapse: collapse;

padding: 3px;

}

table tr:nth-child(even) {

background-color: lightgrey;

}

</style>

</head>

<body>

<h4> AngularJS filter </h4>

<tr>

<th> Country </th>

Enter Filtered Value:

</tr>

<td>{{x.student}}</td>

<td>{{x.country}}</td>

</tr>

</table>

</div>

angular.module('firstApp', []).controller('firstCtroller', function($scope) {

$scope.places = [

{student:'Sita',country:'India'},

{student:'John',country:'Germany'},

{student:'Ram',country:'Mexico'},

{student:'Sham',country:'Iran'},

{student:'Alex',country:'Koria'},

{student:'Radha',country:'India'},

{student:'Karl',country:'Japan'},

{student:'John',country:'UK'},

{student:'Tia',country:'America'}

];

});

</script>

</body>

</html>

Output

The following image is the output of the filter data. All values include the "ia" keywords displayed in the the table.

Conclusion

The "search filter" tab shows data per user requirements using a filter keyword. If a given keyword or data is available in information, then display it as an output

Article Contributed By :

121 Views