How to filter ng-repeat values according to ng-model using AngularJS ?

Last Updated : 01 Aug, 2022

In this article, we will see how to filter the value of the ng-repeat directive according to the ng-model directive using AngularJS.

The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat values. The below illustrations describes the approach for the implementation.

Example 1: Filtering input text ng-repeat values according to ng-model. This filter will show the names of only the matching city.

HTML

<!DOCTYPE html>
<html>

<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>
            Filter ng-repeat values according to ng-model
        </h3> 
    </center>
    <div ng-app="app1" ng-controller="controller1">
        <p>Type a city name in the input field:</p>
        <p>
            <input type="text" ng-model="testfilter">
        </p>
        <p>Filter show the names of only the matching city.</p>

        <ul>
            <li ng-repeat="x in citynames | filter:testfilter">
                 {{ x }} 
            </li>
        </ul>
    </div>
    <script>
        angular.module('app1', []).controller(
        'controller1', function($scope) {
            $scope.citynames = [
                'Ahmedabad', 
                'Ajmer', 
                'Bhopal', 
                'Jaipur', 
                'Surat', 
                'Nagpur', 
                'Mumbai', 
                'Pune', 
                'Indore', 
                'Udaipur', 
                'Jodhpur', 
                'Jabalpur', 
                'Gwalior', 
                'Delhi', 
                'Lucknow', 
                'Banglore'
                ];
            });
    </script>
</body>
</html>

Output: Example 2: Filtering input text ng-repeat values according to ng-model. This filter will show the names of only the matching programming language after capitalizing on each language by applying the filter.