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

31 Oct, 2019
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.
Below examples illustrates the approach:Example 1: Filtering input text ng-repeat values according to ng-model. This filter will show the names of only the matching city
<!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-reapet 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 shows the names of only the matching programming language after capitalizing each language by applying filter.
<!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>Filtering input text ng-repeat values according to ng-model</h3>    </center>    <div ng-app="app1" ng-controller="controller1">          <p>Type a programming language name in the input field:</p>          <p>            <input type="text" ng-model="testfilter">        </p>        <p>          Filter shows the names of only the matching programming language          after capitalizing each language by applying filter.        </p>          <ul>            <li ng-repeat="x in programminglanguagenames| filter:testfilter">                {{ x |myfilter}}            </li>        </ul>      </div>      <script>        var app = angular.module('app1', []);        app.filter('myfilter', function() {            return function(x) {                var i, c, txt = "";                for (i = 0; i < x.length; i++) {                    c = x[i];                      c = c.toUpperCase();                      txt += c;                }                return txt;            };        });        app.controller('controller1', function($scope) {            $scope.programminglanguagenames = [                'cobol',                'pascal',                'ruby',                'php',                'perl',                'python',                'c',                'c++',                'java',                'html',                'css',                'javascript',                'basic',                'lisp',                'smalltalk',                'bootstrap'            ];        });    </script>  </body>  </html>
Output:
AngularJS-Directives
Picked
AngularJS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Auth Guards in Angular 9/10/11
How to bundle an Angular app for production?
What is AOT and JIT Compiler in Angular ?
Angular PrimeNG Dropdown Component
How to set focus on input field automatically on page load in AngularJS ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?