Angularjs filter by multiple properties Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 12 of angularjs tutorial in
this video we'll discuss how to filter
by multiple properties this is
continuation to part 11 so please watch
part 11 before proceeding so here is
what we want to do notice we have to
search text boxes here the search name
text box is going to search only the
name property whereas search city is
going to search only the city property
when we check this box exact match the
search is going to be an exact match so
what is an exact match search now for
example if you take search name textbox
here when we type letter B so obviously
here we have letter B in the name so
this item will be displayed immediately
now when we check this check box exact
match when we type letter B we don't
have any name you know that exactly
matches with letter B right so when we
type the complete name then for example
then we have an exact match with the
name at that point this row will be
displayed so let's see how to achieve
this let's flip to visual studio so this
is the same example that we worked with
in the previous video session notice
here we have set ng model of the search
text box to search text dot name and we
are using that search text here with the
filter okay so now you know this is
going to search only in the name column
so when I type you know letter B notice
that employee bands record is displayed
okay now we want let's say for example
to search by city then what I can do is
simply change this property here to city
and when we reload this view now
whatever we type here is going to be
searched across the CD property so when
I type L look at that city matches with
London so we have you know the rows with
CD s London displayed now what we want
to do is this one we want multiple
search text boxes want to search across
name property the other one to search
across city property and we also want an
exact match search so let's see how to
achieve this so here let's change this
back to name and just to keep it a
little meaningful instead of saying
search employees I'm going to call this
to name and I'm going to make a copy of
this and let's get rid of this search
little text here and let's change this
here to City and the placeholder is
going to say search City so now we
should have search name and search City
text boxes and look at this as I type
name it search is the name property
similarly as I type the city here it
searches the city property and displays
the matching elements all right now
let's implement you know exact match for
that we need a check box so input type
equals check box and I'm going to set
the ng model directive on this one and
that is going to be equal to you can
give it any name that we want I'm going
to call it exact match and this is going
to be a boolean property which will be
automatically attached to the scope
object if the check box is checked then
the value when that property will be
true otherwise false and we can use this
model property with our filter so this
is the property to which we want to
search we have this search text here in
our this text box is going to search
across name property this text box is
going to search across city property and
to that I am also going to apply this
boolean value from this property of the
scope object exact match so if that is
true then exact match is turned on
otherwise it's turned off so let's
specify the text here for the check box
as exact match let's save the changes
and let's reload this page now look at
this when I type letter B we have that
rule displayed because name here matches
B but that's not an exact match name
contains letter B so that is displayed
now look at this when I check this check
box it's gone because that's not an
exact match now when I type B and look
at that it shows up now since I have
this exact match check if I type L here
look at that it vanishes because in the
see
we don't have an exact match for letter
L but when I complete typing London zero
shows up okay now let's look at another
example so here the example is we have
multiple search text boxes each search
text box is searching a specific
property now if you have a single search
text box searching across all properties
is very easy all you do is just remove
you know these properties right here dot
name dot city and let's get rid of this
exact match so now let's change the
placeholder to employees because we are
going to search across all properties of
the employees and since we don't have
that exact match model property anymore
I'm going to remove that okay now you
know we are using this as a whole model
and we're using that as the value for
the filter now by default this is going
to search across all properties right so
if I type for example F look at that we
have that in gender so those two rules
show up similarly if I type letter S
that's present in name and if I type 68
that's present in salary letter C is
present in cities and now a single
textbox is able to search across all
properties okay that's easy as well now
we will have to write some custom code
if we have to search across selected
properties let's say for example I want
a single search text box and I want that
search text box to search for example
only the name and city properties if we
have to do that then one of the options
is to write a custom function which is
capable of doing that let's see how to
achieve that so here is what we want to
do we want to have a search text box
which is going to search City and named
properties so let's see how to do this
so the first thing is this is going to
say search city and name and the model
is going to be search text and what I'm
going to do is within our controller
function to the scope object I'm going
to attach a function
and I'm going to call it surge this is
going to be the function and to this we
will pass the item that we want to
search and Here I am going to check now
if you look at the search text box the
property that we are attaching to the
scope object is search text so I'm going
to take that and check it right here so
if dollar scope dot search text if that
is equal to undefined
that means we haven't typed anything
into this text box let's actually go
ahead and reload let's save this and
reload this page okay so if we didn't
type anything into this text box then
obviously this search text will be
undefined on the scope object so if it
is undefined what I'm going to do is
return true so what is this function
going to do this function will be called
for every element within the array if
this function returns true then that
element you know for which this function
has returned true that will be displayed
on the page otherwise it will not be
displayed on the page okay so if you
want the element I mean to be displayed
on the page then you know you have to
return true from this function so if we
haven't typed anything within the search
text box then you know we still want to
display every row said that that's the
reason why we are returning true you
know if it is undefined
else if it's not undefined then that
means we have got something within the
search text box so what do we want to do
we want to take that value whatever the
user has typed into the text box and
search across name and City columns
right so how are we going to get access
to the name and City columns well we
have this item object that is passed to
the function so what I'm going to do
here is F item dot name and I'm going to
convert that to lowercase because I
don't want the search to be case
sensitive so if item dot name dot to
lowercase dot I'm going to use the index
of function and then here I'm going to
specify this search
text whatever we have typed into the
textbox and I'm going to convert that to
lowercase as well so if that is not
equal to minus one if the index of the
search text is not equal to minus one
then that means we have a match found so
what do we want to do we want to return
true all right if none of these
conditions match then finally it's going
to come here and return false that means
the user has typed into the search text
box something and that whatever the user
has typed it didn't match with this name
property so it comes here and returns
false meaning we don't want that item to
be displayed in the search result okay
now here we are only searching for the
name property if you want to search for
city you know just copy this and change
the property name to CD so I'm going to
use the or condition there and change
the name of the property here to city
all right so let's save the changes the
name of the function is search and I'm
going to specify this function call as
the value for our filter so this will be
called for every item in the array and
whatever item returns true from that
function that will be displayed on the
page so let's save all these changes and
reload our page look at this when I type
letter B that's present in the name
property so that shows up if I type
letter L that is present in city so that
shows up if I type letter M again that's
present in name so it shows up let's
type for example F so f is not present
in name or city so nothing matches and
no row shows up so you can include as
many properties as you want in this
function right here thank you for
listening and have a great day