AngularJS filter Filter (original) (raw)

Last Updated : 01 Aug, 2022

The “filter” Filter in AngularJS is used to filter the array and object elements and return the filtered items. In other words, this filter selects a subset (a smaller array containing elements that meet the filter criteria) of an array from the original array.

Syntax:

{{arrayexpression | filter: expression : comparator : anyPropertyKey}}

Parameter Values:

Example 1: This example describes the AngularJS filter Filter by filtering & rendering the name only having the character “e” in the name.

HTML

<!DOCTYPE html>

< html >

< head >

`` < title >AngularJS filter Filter</ title >

`` < script src =

`` </ script >

</ head >

< body >

`` < div ng-app = "myApp"

`` ng-controller = "namesCtrl" >

`` < h1 style = "color:green;" >

`` GeeksforGeeks

`` </ h1 >

`` < h3 >AngularJS filter Filter</ h3 >

`` < ol >

`` < strong >

`` < li ng-repeat = "x in names | filter : 'e'" >

`` {{ x }}

`` </ li >

`` </ strong >

`` </ ol >

`` </ div >

`` < script >

`` angular.module('myApp', [])

`` .controller('namesCtrl', function($scope) {

`` $scope.names = [

`` 'Jani', 'Carl', 'Margareth',

`` 'Hege Mathew', 'Joey Tribiani',

`` 'Gustav', 'Birgit', 'Mary', 'Kai'

`` ];

`` });

`` </ script >

`` < p >

`` This example displays the names containing the

`` character "e"(filter)

`` </ p >

</ body >

</ html >

Output:

Example 2: This example uses an object to filter its element.

HTML

<!DOCTYPE html>

< html >

< head >

`` < title >

`` AngularJS filter Filter

`` </ title >

`` < script src =

`` </ script >

</ head >

< body >

`` < div ng-app = "myApp" ng-controller = "arrCtrl" >

`` < h1 style = "color:green" >

`` GeeksforGeeks

`` </ h1 >

`` < h3 >

`` AngularJS filter Filter

`` </ h3 >

`` < ol >

`` < li ng-repeat =

"x in customers | filter :{'name' : 'e', 'city' : 'Patna'}" >

`` {{x.name + ", " + x.city}}

`` </ li >

`` </ ol >

`` </ div >

`` < p >

`` The filter will give a match if there is an

`` "e" character in the name, and the city is

`` "Patna". Milk wasn't matched because the alphabet

`` 'e' is not present.

`` </ p >

`` < script >

`` var app = angular.module('myApp', []);

`` app.controller('arrCtrl', function ($scope) {

`` $scope.customers = [{

`` "name": "Chocolate Shake",

`` "city": "Patna"

`` }, {

`` "name": "Hot Chocolate",

`` "city": "Delhi"

`` }, {

`` "name": "Milk",

`` "city": "Patna"

`` }, {

`` "name": "Coffee",

`` "city": "Patna"

`` }, {

`` "name": "Tea",

`` "city": "Pune"

`` }, {

`` "name": "Mineral Water",

`` "city": "Mumbai"

`` }, {

`` "name": "Iced Tea",

`` "city": "Bangalore"

`` }];

`` });

`` </ script >

</ body >

</ html >

Output:

Example 3: In this example, we are going to see a “strict” caparison that does not return any value unless it is a pure match.

HTML

<!DOCTYPE html>

< html >

< head >

`` < title >

`` AngularJS filter Filter

`` </ title >

`` < script src =

`` </ script >

</ head >

< body >

`` < div ng-app = "myApp"

`` ng-controller = "arrCtrl" >

`` < h1 style = "color:green" >

`` GeeksforGeeks

`` </ h1 >

`` < h3 >

`` AngularJS filter Filter

`` </ h3 >

`` < ol >

`` < li ng-repeat =

`` "x in customers | filter : 'Chinchwad' : true" >

`` {{x.name + ", " + x.city}}

`` </ li >

`` </ ol >

`` </ div >

`` < p >

`` The filter will give a match for the array

`` item(s) where one or more object values are

`` "Chinchwad".

`` </ p >

`` < script >

`` var app = angular.module('myApp', []);

`` app.controller('arrCtrl', function($scope) {

`` $scope.customers = [{

`` "name": "Mumbai Food",

`` "city": "Chinchwad"

`` }, {

`` "name": "Gurgaon Catering",

`` "city": "Haryana City"

`` }, {

`` "name": "Noida temperature",

`` "city": " Chinchwad"

`` }, ];

`` });

`` </ script >

</ body >

</ html >

Output:

Note: If you notice that the last Chinchwad in the array is not included in the list, because the last Chinchwad contains space before itself.

Reference: https://docs.angularjs.org/api/ng/filter/filter

Similar Reads

AngularJS Basics