Ng hide and ng show in AngularJS Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 14 of angularjs tutorial in
this video we'll discuss
ng-hide and ng-show directives in
angular ng-hide and ng-show directives i
used to control the visibility of the
HTML elements let's understand these
with an example notice here we have a
table that's displaying employee data
just above the table we have this hide
salary checkbox when this checkbox is
unchecked we want this salary column to
be visible when it is checked we want to
hide the salary column let's see how
easy it is to achieve this using ng hide
and ng show directives let's flip to
visual studio so within the script or
J's file we have our controller function
notice within this function we have this
employee sorry which at the moment
contains five employee objects and then
we are attaching this employees array to
the dollar's coop object using this
employee's variable which is going to be
the model for the view and then within
our view that is HTML page one dot HTML
we're using an HTML table to display the
employee data within the tee head
section notice we have got 4 th elements
to display the column headers and within
the tee body section we are using the ng
repeat directive to loop through each
employee in the employees array and then
we are binding to the employee objects
name gender city and salary properties
so when we view this page in the browser
this is how the employee data is
displayed at the moment just about this
table we want a check box so input type
equals check box and let's include this
label for the check box hide salary and
let's include to break elements and on
this check box I'm going to use ng -
model directive I am going to set that
to this variable hide salary and then I
am going to use this variable within the
th element so within the th element I'm
going to use ng height directive and set
that to the value of this variable and
I'm going to do exactly the same thing
for the TD element that's displaying the
salary property value
now initially height salary will not be
available on the dollar scope object
because within our controller to the
dollar scope object we are only
attaching this variable employees this
variable height salary initially when
the page loads it will not be available
on the dollar scope object so obviously
that variable will be undefined
undefined we'll evaluate to false and we
have said that as the value for ng
height so ng-hide falls that means you
know this th will be displayed and this
TD will be displayed so initially when
the page loads we should be able to see
the salary column values let's reload
this and see that look at that you know
when the height salary check box is
displayed this is unchecked and the
salary column is visible now when I
check this checkbox what is going to
happen the value of hide salary variable
will be changed by this element and that
will be updated in the model as well and
these th element and thus TD element are
using that variable so they will read
the updated model value which is going
to be true and ng-hide equals true that
means both this th element and this TD
element will be hidden let's look at
that in action
notice that as we check the check box
the salary column is hidden when we
uncheck it it's displayed again now we
can also achieve exactly the same thing
by using ng-show directive instead of ng
hide when we do this we will have to
negate the value of hide salary using
not operator like that let's save the
changes and let's reload this page look
at that the example should behave
exactly the same way as before but here
we are using ng show instead of ng hide
so here we have the controller code and
here we have the view HTML let's look at
another example instead of hiding the
entire salary
column let's mask and unmask salary
column values so when the checkbox is
unchecked
we should not mask the salary column
values when we say hide salary the
salary column values should be masked
let's see how to achieve this so to
achieve that what I'm going to do is use
to th elements and I'm going to use hide
and show and let's do the same thing
here
ng hide ensure and I'm going to change
I'm not going to use any data binding
expression here instead I'm going to use
you know hash symbols just to give the
effect of you know that these salary
column values are masked alright so
ng-hide
I'm going to use height salary variable
alright so let's see how this is going
to work so initially ngmodel
height salary this variable will not be
available on the dollar scope object so
height salary will be undefined
undefined evaluates to false ng-hide
false
so this header element will be visible
ng-show false so that means this will be
hidden
that means it's corresponding TD which
is this one will also be hidden so
initially the salary column that has the
actual values will be visible when we
check the check box height salary will
be true so when it is true ng-hide true
then the salary column which displays
the actual values will be hidden and the
one that has the masked values that is
these hash symbols will be hidden will
be displayed let's actually look at that
in action so let's save these changes
and look at that when I check this check
box
notice the salary column values are
masked when I uncheck it the values are
displayed and here is the required HTML
change thank you for listening and have
a great day