AngularJS filters Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 8 of Hanley J's tutorial in
this video we'll discuss filters in
angular filters in angular can do three
different things they can format sort
and filter data filters can be used
either with a binding expression or
attractive we'll look at an example of
both to apply a filter use the pipe
character here is the syntax so we
specify the binding expression followed
by that the pipe character and then we
specify the name of the filter colon and
then any parameter value that we want to
pass to that filter we said that filters
in angular can do three different things
format sort and filter data so here we
have the list of inbuilt angular filters
that are available for formatting data
the first filter is the lower case
filter as the name States this filter
formats all characters to lowercase
uppercase filter formats all characters
to upper case number filter formats and
number as text includes comma as
thousand separator and the number of
decimal places can also be specified
currency filter formats a number as a
currency dollar is the default currency
custom currency and the number of
decimal places can be specified date
filter formats a date to a string based
on the requested format with the date
there are several formats available in
angular here are a few of them for small
letter wise gives us a four digit year
for example 1998 to small letter wise
gives two-digit year for example if you
provide 1998 we only get two digits that
is the last two digits 98 as far as the
month is concerned if we use for capital
letter MS we get the full month name if
we use three capital letter MS we get
the short month name two capital letter
ms give us the month number the month
number is from 1 to 9 will have leading
zeros with a single capital letter M
again we get month numbers but then the
month numbers from 1 to 9 will not have
leading zeros and the same is true for
day numbers to get the day numbers we
can use either too small letter
these are a single letter day with two
small letter DS we get day numbers from
1 to 31 but then the day number is from
1 to 9 we'll have leading zeros with a
single letter D day numbers from 1 to 9
will not have leading zeros for the full
date format documentation visit this URL
right here
I'll have this link available in the
description of this video there's
another filter limit to filter this
filter can be used to limit the number
of rows or characters in a string and
here is the syntax for using this filter
so we specify either our binding
expression or a directive and then we
use the pipe symbol and then specify the
name of the filter this filter has got
two parameters limit and begin the first
parameter limit is required whereas
begin is optional let's look at an
example of using all these filters so
here is what we want to do we want to
display you know
list of employees here on our web page
using a table so we want to display name
of the employee date of birth gender and
notice we are displaying salary twice
within this column we are applying the
numbers alte and within this column we
are applying the currency filter and we
also want to have this interface right
here and on the top of the table rows to
display and this is a number type text
box which means you can use this up and
down arrows to increment or decrement
the number that is displayed within the
text box so at the moment we have this
value 3 displayed so that's why we have
three rows here as I increase the number
of rows within this text box we want
those many number of rows to be
displayed within this text box let's see
how to achieve this so the first step
here is to build this model which I have
already done so here we have our
employees array and notice every
employee object has got name date of
birth gender and salary properties and
we have already attached that employees
array to the scope object now let's go
to overview which is the sagely ml page
1 dot HTML so here we want to present
the data using a table so I am going to
use a table here
and this one is going to first have 80
heads action so let's include a TR and
I'm going to include th elements and how
many th elements we need we need one two
three four and five th elements so let's
make five copies of this so first we
want to display the name of the employee
let's display date of birth and gender
salary twice
alright let's get rid of this last edge
there and let's include a section 40
body and let's include a TR element so
we want to repeat it here for every
employee so on this I am going to use ng
- repeat directive and what's the model
the model is employees so within our ng
repeat directive for each employee in
our employees model what do we want to
do we want to stamp out a TD so let's
include five TDs so within the first TD
we want to display the name of the
employee so employee dot name let's
actually make a copy of this one so that
we don't have to type the binding
expression all right so first we want to
display name then date of birth and then
we want to display gender and salary
twice
all right so let's go ahead and view
this page in the browser so at the
moment we are not using any of the
filters that we have discussed and look
at this the data is not formatted
properly here so what I'm going to do is
include this style sheet so we've got
some Styles here so let's go ahead and
drag and drop this style sheet into the
head section of our page so let's reload
this page and you know the styles are
applied now first of all look at the
name you know the first letter is
capital but the other ones are small
letters now I want to capitalize all
names of the employees to do that we can
use the uppercase filter so here we have
a binding expression following that I'm
going to use the pipe symbol and then
I'm going to use the uppercase filter
and as far as this gender is concerned I
want all of them to be in lowercase so
with gender I'm going to use the
lowercase filter okay and look at the
date the date at the moment it's
displaying the entire date string so we
have the date part and from here we have
the time part now let's say I want just
the date part and that date part should
be in DD mm and yyy we want four digits
in the year so what I can specify here
is use the date filter so the name of
the filter is date and then we can we
have to use the pipe to specify the
filter so pipe and then the name of the
filter is date and then the format for
date okay so the value for the format is
going to be DD /mm so I'm using two
capital letter
MS so I'm going to get two digit day
number and then for small letter Y so we
are going to get four digits in the year
so let's save these changes and reload
this page look at that and our name is
capitalized date of birth is in DD mmm
yyy format and gender is all in a small
now let's go ahead and apply a number
filter on the salary column so the first
salary column we want to apply number
filter so I'm just going to include that
in the bracket so we can see which
filter is applied and for the second
that salary column let's apply the
currency filter all right so we want to
apply number filter now before we
refresh the page look at the salary that
is displayed so if you look at the
salaries and now we don't have any
thousand separator here okay
so all we are doing right now is simply
applying the number filter on the salary
column so when we reload this look at
that we get the thousand separator now I
also want to limit the number of decimal
places maybe to just to two decimal ok
so to do that we can specify the value
so I use the coulomb symbol to specify
the parameter value and I want to limit
it to two decimal places let's reload
this page and look at that we only have
two decimal places and that value is
actually rounded now seven a date is now
seven nine now let's look at the
currency filter so on the salary column
I want to use the currency filter and
look at this when we reload this we get
the default currency symbol which is
dollar now let's say I want to display
this and great British pounds so I can
specify you know the custom currency
format so which is going to be pound and
look at this when we reload this we get
pound symbol as the currency format and
let's say you know I want to limit this
to just one decimal place we can do that
again so I'm going to use another colon
here and use one decimal place and when
we reload look at that we get only one
decimal place now okay so we discussed
lowercase uppercase date number and
currency filters now let's discuss the
limit to filter so depending on the
number of rows that we have in the text
box we only want to display those many
number of rows so the flow
thing to do is get that interface right
there on the page so just about the
table I'm going to include an input
element of type number and I'm going to
set the step attribute to one so what is
this going to do this is going to
increment or decrement the value in the
text box by one when you click on any of
these arrows okay so that's what step is
going to do and the minimum value is
going to be zero and maximum value is
going to be five okay and I'm going to
specify ngmodel directive on this and
I'm going to call it rule limit okay the
number of rows that we want to limit
okay so let's include to HTML break
elements and let's reload this page so
we should get that interface that we
have seen on the UI and we want that
little text as well rows to display all
right so let's reload this page all
right so now look at this for this
number textbox we have specified the ng
model s rule limit now we don't have
that you know property on the model so
I'm going to attach that to the model so
let's go back to the controller dollar
scope and let's copy the name here and
paste that within our script file so
dollar scope dot rule limit let's
initialize that to a value of three so
when we first load the page we only want
to show three rows that's the default
value and then the user will have the
option to either increase or decrease
that row limit okay now before we use
this rule limit variable what I'm going
to do is hard code that so all these
filters that we have used we have used
them in the binding expression remember
we have said that filters can be used
either with a binding expression or with
a directive now we have this ng-repeat
directive I'm going to use this limit to
filter where
you know a director so we use the pipe
character and the filter is limit too
and it has got two parameters the first
parameter is the number of rules that we
want to limit to so I'm going to specify
that as three I have hard-coded the
value so let's go ahead and reload this
page look at that now we have only three
rows displayed but then it starts at the
first row by default the first row is
Ben's row so that's what we see right
here and then it shows three rows for us
now let's say for some reason we want to
display just two rows and we want to
start let's say bit serifs row not with
Ben's row now arrays are zero index
based so this is 0 and this is 1 so I'm
going to say we want to begin at 2nd row
okay so let's go ahead and reload this
page now look at this it starts at marks
row why is that you know instead of
starting its header row it starts at
marks row that's basically because
arrays are zero index based so 0 1 at 2
and we have specified that we want to
begin at 2 so if you want to start at 0
row you have to specify that value as 1
so when we reload this now it starts at
this error row all right now instead of
hard-coding the values like that we want
those values to be coming from the
textbox now we have already specified
the ng-model
directive on the textbox and we also
have you know that property added to our
scope object so now we can use that
property right here with the filter
value so I'm going to use the same
property instead of these hard-coded
values so let's save the changes and
when we reload the first thing that
should happen is look at that within the
text box we have the trap value 3
displayed and we only have 3 rows
displayed in the table and as I increase
the value look at that dynamically the
number of rows in the table are updated
and as I decrease look at that
it doesn't go beyond below zero
similarly when we incremented it doesn't
go beyond fire that's because we have
specified the min and Max values for
that textbox so what's happening when we
change this value now when we change
this value remember we have set the
model and the model to row limit so it's
taking that value and updating the model
automatically okay so this property in
the model is automatically updated as we
change the value in the textbox and then
since we are using that variable you
know right here with this filter it's
automatically updating the rules that
are displayed in the table so that's the
benefit of two-way binding and angular
which we discussed in one of our
previous video sessions in our next
videos we'll discuss sorting and
filtering data using angular filters
thank you for listening and have a great
day