AngularJs Filter Example

AngularJs Filter Example : It Selects subset of array and returns as a new array

AngularJs Filter Example with Syntax

In Html Template

{{ filter_expression | filter : expression : comparator}}

In Javascript

$filter('filter')(array, expression, comparator)

array : Input array as source

expression : Can be string, Object or function used for selecting items from array.

comparator : Used to determine the actual and Expected Value.

Let us understand with very basic example and demo.

Filter Example

<!DOCTYPE html>
<html lang="en">
    <script src="//"></script>

<div ng-app="" ng-init="myData=[{name:'John',city:'New York'},

    <p>Search <input type="text" ng-model="searchstr"></p>
    <table id="searchResults">
    <tr ng-repeat="data in myData | filter:searchstr">



Try it »

Note: Please Make you take proper ng-model name not any invalid name like : search-str Or search_str. Avoid dash, underscore and space in ng-model name.

The above example will look like this :

AngularJs Filter Example

AngularJs Filter Example

When we search the “Maya” keyword it show the result as below:

AngularJs result Filter Example

AngularJs Filter Example Result


Add Comment

📖 Read More