AngularJS filters [w/ subs]



00:00:00 – this is part 8 of family days to do in
00:00:02 – this video we'll discuss filters and
00:00:05 – angler filters in angular can do three
00:00:08 – different things they can format thought
00:00:10 – and filter data filters can be used
00:00:13 – either the binding expression are
00:00:15 – attractive look at an example of both to
00:00:18 – apply a filter use the pipe character
00:00:20 – here is the syntax to specify the
00:00:23 – binding expression followed by that the
00:00:25 – pipe character and then we specify the
00:00:27 – name of the filter colon and then any
00:00:30 – parameter value that we want to pass
00:00:32 – through that filter we said that filters
00:00:35 – an annular can do three different things
00:00:36 – formats not until today that so here we
00:00:40 – have the list of involved and the
00:00:42 – filters that are available for
00:00:43 – formatting data the first filters the
00:00:45 – lowercase filter as the names teeth
00:00:48 – this is the format all characters to
00:00:50 – lowercase uppercase filter formats all
00:00:53 – characters to uppercase number two de
00:00:55 – formats and number as text includes car
00:00:59 – a thousand separator and the number of
00:01:01 – decimal places can also be specified
00:01:02 – currency filter formats and number as a
00:01:06 – currency dollars the default currency
00:01:08 – custom currency and the number of
00:01:10 – decimal places can be specified date
00:01:13 – center formats a date to a string based
00:01:16 – on the requested format but the date
00:01:19 – there are several formats available in
00:01:21 – angler here are a few of them for small
00:01:24 – little wise gives us a four-digit year
00:01:26 – for example 1998 to smaller wise gives
00:01:31 – to disappear for example if you provide
00:01:33 – 1998 you only get two digits that is the
00:01:35 – last two digits 98 as far as the month
00:01:39 – is concerned if we use for capital
00:01:41 – letter m's we get the full month name if
00:01:44 – we use three capital letter ends we get
00:01:47 – the short month name to capital letter M
00:01:50 – give us the month number the month
00:01:52 – numbers from one to nine will have
00:01:55 – leading vehicles with a single capital
00:01:58 – letter M again we get month numbers but
00:02:00 – then the month numbers from one to nine
00:02:02 – does not have leading roles and the same
00:02:04 – is true for day numbers to get the day
00:02:06 – numbers we can use a the two small
00:02:09 – letter
00:02:10 – these are a single letter D
00:02:13 – it's too small entities we had the
00:02:15 – numbers from 1 231 but then the day
00:02:17 – numbers from one to nine will have
00:02:19 – leading zeros with a single letter D
00:02:21 – they numbers from one to nine they're
00:02:23 – not have leading zeros for the full date
00:02:26 – format documentation visit this URL
00:02:28 – right here and have this link available
00:02:30 – in the description of this video there's
00:02:33 – another filter limit to filter this
00:02:36 – filter can be used to limit the number
00:02:37 – of rows are characters in a string and
00:02:40 – here is doesn't actually using the soda
00:02:42 – so we specify a de la binding expression
00:02:45 – of the directive and then we use the
00:02:47 – pipe symbol and institute the name of
00:02:49 – the filter this filter has got two
00:02:51 – parameters limit and began its first
00:02:53 – parameter limited supplied whereas the
00:02:56 – biggest option let's look at an example
00:02:57 – of using all these filters so here's
00:03:01 – what we want to do we want to display
00:03:03 – and a list of employees here on our
00:03:05 – webpage using a table so we want to
00:03:08 – display name of the employee data but
00:03:10 – gender & notice we are displaying salary
00:03:12 – twice within this column we are playing
00:03:16 – the number closer and within this column
00:03:17 – we are applying the currency filter and
00:03:19 – we also want to have this interface
00:03:21 – right here and on the top of the table
00:03:22 – rules to display and this is a number
00:03:25 – type text box which means you can use
00:03:28 – this up-and-down Adil's to increment and
00:03:30 – decrement the number that is displayed
00:03:32 – that in the text box so at the moment we
00:03:34 – have this value 3 displayed so that's
00:03:37 – why we have people here as I increase
00:03:38 – the number of rows in this text box we
00:03:41 – want those many number of rows to be
00:03:43 – displayed within this text works let's
00:03:46 – see how to achieve this
00:03:47 – so the first step here is to build this
00:03:49 – model which I have already done so here
00:03:52 – we have our employees are a and notice
00:03:55 – every employee object has got name date
00:03:58 – of birth gender & salary properties and
00:04:02 – we have already attached that employees
00:04:04 – hurry to the school project
00:04:06 – now let's go to love you which is this
00:04:09 – HTML page 1 dot HTML so here we want to
00:04:13 – present that data using a table so i am
00:04:16 – going to use the table here and this one
00:04:21 – is going to first have 80 head section
00:04:23 – so let's include PR and i'm going to
00:04:26 – include th element and how many deer
00:04:28 – tellement we need we need one two three
00:04:31 – four and five th element so let's make
00:04:34 – five copies of this so first we wanted
00:04:42 – us to the name of the employee that's
00:04:49 – displayed of birth and gender salary
00:04:55 – twice
00:05:02 – alright let's get rid of this last year
00:05:04 – there and let into this section 40 body
00:05:08 – and let's include PR element so we want
00:05:12 – to repeat appear for every employee so
00:05:14 – on this i'm going to use ng dash
00:05:16 – repeated directive and what's the model
00:05:19 – the model is employees so within our NDP
00:05:24 – to directive for each employee then our
00:05:29 – employees model what we want to do we
00:05:32 – want to stamp out a TD so let's include
00:05:37 – five td's so within the first three if
00:05:44 – you want to display the name of the
00:05:45 – employee so employee dot named that's
00:05:49 – actually make a copy of this one so that
00:05:53 – we don't have to type the binding
00:05:56 – expression
00:05:57 – alright so first we want to display name
00:06:03 – then date of birth and then we want to
00:06:08 – display gender and celery twice
00:06:16 – alright so let's go ahead and view this
00:06:20 – page in the browser so at the moment we
00:06:22 – are not using any of the services that
00:06:24 – we have discussed and look at this the
00:06:26 – data is not formatted properly here
00:06:28 – so what I'm going to do is include this
00:06:30 – style sheet
00:06:31 – we've got some styles here so let's go
00:06:34 – ahead and drag and drop the style sheet
00:06:37 – into the head section of our page so
00:06:45 – let's reload this page and in other
00:06:49 – states that applied now first of all
00:06:51 – look at the name you know the first
00:06:53 – letter is capital but the other ones are
00:06:55 – small letters now I want to capitalize
00:06:57 – all names of the employees to do that we
00:07:01 – can use the uppercase filter so here we
00:07:04 – have a binding expression following that
00:07:06 – I'm going to use the pipe symbol and
00:07:08 – then i'm going to use the upper case
00:07:11 – Delta and the first agenda is concerned
00:07:14 – I want all of them to be in lowercase so
00:07:16 – with gender i'm going to use the
00:07:20 – lowercase filter ok and look at the date
00:07:25 – the date at the moment it's displaying
00:07:27 – the entire date strength so we have the
00:07:29 – date part and from here we have the time
00:07:31 – part let's say I want just the deep part
00:07:34 – and that bass part should be in DD mm
00:07:38 – and yyyy we want four digits in the ear
00:07:42 – so what I can specify here is used the
00:07:46 – beach shoulder so the name of the filter
00:07:48 – is date and then we can we have to use
00:07:52 – the pipe to specify the syllabus to pipe
00:07:54 – and then the name of the physical state
00:07:56 – and then the format for date
00:07:58 – ok so the value for the format is going
00:08:02 – to be DD /em em so I'm using to capital
00:08:07 – letter ends i'm going to get to digital
00:08:10 – D number and then for small little wise
00:08:13 – so we're going to get four digits in
00:08:15 – here so let's save these changes and
00:08:17 – reload this page look at that in our
00:08:21 – name is capitalized bit of birth is
00:08:23 – indeed emm weiwei format and generally
00:08:26 – halls
00:08:28 – and a small letters now let's go ahead
00:08:31 – and apply number filter on the salary
00:08:33 – column for the first Hilary column we
00:08:35 – want to apply number foga i'm just going
00:08:38 – to include that in the bracket so we can
00:08:40 – see which filter is applied and for the
00:08:43 – second that salary column let's apply
00:08:46 – the currency filter
00:08:48 – alright so we want to apply number photo
00:08:52 – now before we refresh the page look at
00:08:57 – the salary that is displayed
00:08:59 – let's look at these salaries and now we
00:09:01 – don't have any thousand separator here
00:09:03 – ok so all we're doing right now is
00:09:06 – simply applying the number filter on the
00:09:08 – salary column so when we look at this
00:09:10 – look at that we get thousands separator
00:09:13 – now I also want to limit the number of
00:09:16 – decimal places maybe too just to do this
00:09:19 – not ok so to do that we can specify the
00:09:23 – value so i used the coolant symbols to
00:09:25 – specific parameter value and I want to
00:09:27 – limit it to two decimal places
00:09:29 – let's reload this page and look at that
00:09:31 – we only have to this most places and
00:09:33 – that value is actually owned it now 78
00:09:36 – is now 79 now let's look at the currency
00:09:39 – filter so on the salary column I want to
00:09:42 – use the currency filter and look at this
00:09:47 – Wendy Lord death we get the default
00:09:50 – currency symbol which is dollar now
00:09:52 – let's say I want to display this in
00:09:54 – great british pounds so i can specify in
00:09:58 – our the custom currency format which is
00:10:01 – going to be a pound and this can be Lord
00:10:08 – death we get powned simplistic currency
00:10:11 – format and let's say you know I want to
00:10:14 – limit this to just one decimal place we
00:10:16 – can do that again so i'm going to use
00:10:19 – another column here and use one decimal
00:10:21 – place and when we look at that we get
00:10:24 – only one decimal place now
00:10:26 – ok so we discussed lowercase uppercase
00:10:29 – date number and currency filters let's
00:10:32 – discuss the limit to subject so
00:10:34 – depending on the number of rows that we
00:10:36 – have in the text box we only want to
00:10:38 – display those many numbers
00:10:40 – fraud so the first thing to do is get
00:10:42 – that interface right there on the page
00:10:43 – so just about the table i'm going to
00:10:48 – include an input element of type number
00:10:52 – and i'm going to set the step attribute
00:10:55 – to one so what is this going to do this
00:10:58 – is going to increment or decrement the
00:11:01 – value in the text box by one then you
00:11:03 – click on any of these shadows
00:11:06 – ok so that's what step is going to do
00:11:09 – and the minimum value is going to be 0
00:11:12 – and maximum value is going to be five ok
00:11:17 – and I'm going to specify end the model
00:11:19 – director on this and i'm going to call
00:11:21 – it through limit
00:11:25 – ok the number of force that we want to
00:11:26 – limit to ok so let's include to HTML
00:11:30 – break elements and let's reload this
00:11:36 – page so we should get that interface
00:11:38 – that we have seen on the you are and we
00:11:40 – want that little text as well rules to
00:11:43 – display all right so let's reload this
00:11:47 – page
00:11:49 – alright so now look at this for this
00:11:53 – number text box we have specified any
00:11:56 – more or less through limit now we don't
00:11:58 – have that in our property on the model
00:12:01 – so I'm going to attach that to the model
00:12:04 – so let's go back to the controller Donna
00:12:06 – scope and let's copy the name here and
00:12:12 – pay start with an hour good flat so
00:12:16 – telescope the true limit let's
00:12:18 – initialize that the value of 3 so when
00:12:20 – we first load the page you only want to
00:12:22 – show me those just the default valley
00:12:25 – and then the user will have the option
00:12:26 – to aid the increase and decrease that
00:12:29 – the limit
00:12:30 – okay now before we use this rule limit
00:12:34 – variable what I'm going to do is
00:12:36 – hardcore that so all these things that
00:12:39 – we have used we have used them in the
00:12:41 – binding expression remember we have said
00:12:43 – that this can be used at the binding
00:12:45 – expression or the director now we have
00:12:48 – this NDP director i'm going to use this
00:12:51 – limit too
00:12:52 – filter with a director so we use the
00:12:57 – pipe character and the filter is limited
00:13:01 – and it got to 3 meters the first
00:13:03 – parameter is the number of rows that we
00:13:05 – want to limit 2 i'm going to specify
00:13:07 – that s3 i have hard-coded the value so
00:13:10 – let's go ahead and reload this page look
00:13:12 – at that now we have only three rules
00:13:15 – displayed but then it started the first
00:13:18 – rule by default the first fence row so
00:13:21 – that's what we see right here and then
00:13:23 – it shows through those for us and let
00:13:25 – sit for some reason we want to display
00:13:27 – just tools and we want to start let's
00:13:34 – say but satisfied i'm not with Spencer
00:13:36 – now is the index based so this is 0 and
00:13:40 – this is one so i'm going to say we want
00:13:44 – to begin at second row
00:13:48 – ok so let's go ahead and reload the
00:13:52 – state now look at this it starts at
00:13:54 – marks
00:13:55 – why is that you know instead of starting
00:13:58 – its hetero it starts at marks that's
00:14:01 – basically because i hadn't experienced
00:14:03 – 2012 and we have specified that we want
00:14:07 – to be connected to so if you want to
00:14:09 – start at set a row you have to prepare
00:14:11 – that value is 1 so when we load this now
00:14:13 – it starts at this arrow all right now
00:14:17 – instead of hard-coding the values like
00:14:18 – that we want those values to be coming
00:14:21 – from the text world now they've already
00:14:24 – specified the ng-model directive on the
00:14:27 – text block and we also have you know
00:14:30 – that property added to our scope object
00:14:33 – so now we can use that property right
00:14:37 – here with the filter value so i'm going
00:14:40 – to use the same property and stop these
00:14:44 – hard-coded values so let's save the
00:14:47 – changes and when we load the first thing
00:14:50 – that should happen and look at that
00:14:51 – within the text box we have the temp
00:14:53 – value T displayed and we only have claws
00:14:56 – displayed in the table and as they
00:14:58 – increase the value
00:15:00 – look at that dynamically the number of
00:15:02 – rows in the table that updated and as a
00:15:04 – decrease
00:15:05 – look at that and then it doesn't go
00:15:07 – beyond below 0 similarly can be
00:15:10 – implemented it doesn't go beyond fire
00:15:13 – that's because we have 25 min and Max
00:15:14 – values for that xbox so what's happening
00:15:18 – when we change this valley now when we
00:15:20 – change this value remember we have set
00:15:22 – the model and the model to Roulettes was
00:15:24 – taking that value and updating the model
00:15:27 – automatically ok so this property in the
00:15:30 – model is automatically updated as we
00:15:32 – change the value in the text box and
00:15:35 – since we're using that variable you know
00:15:38 – right here but this filter it's
00:15:40 – automatically updating those that are
00:15:43 – displayed in the table so that's the
00:15:45 – benefit of two binding and angular which
00:15:47 – we discussed in one of our previous
00:15:49 – video sessions in our next videos will
00:15:53 – discuss sorting and sensing data using
00:15:56 – angular photos
00:15:57 – thank you for listening and have a great
00:16:00 – day


Video Url:
http://youtu.be/tfj-VKPX4Mg

(Visited 15 times, 15 visits today)

Comments

comments