Two way data binding in AngularJS Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 5 of angularjs tutorial in
this video we'll discuss two-way
data-binding in angular along the way
we'll also discuss one of the very
useful directive ng - model two-way
data-binding
keeps the model and the view in sync at
all times that is a change in the model
updates the view and a change in the
view updates the model let's understand
this two-way data-binding
with an example with another controller
function right here we have this dollar
scope object available to that I'm going
to attach this message variable which is
going to be our model and within this
variable I'm going to store the string
hello angular to display this model data
within the view we use a data binding
expression let's save the changes and
when we reload this webpage we should
see the model data hello angular the
binding expression updates the view when
the model changes but what if we want
the other way round when the view
changes we want the model to be updated
automatically
that's exactly is the purpose of ng -
model directive ng - model directive
updates the model when the view changes
let's look at this action I'm going to
include a text box within this view
input type equals text let's include ng
- model directive and the value for this
is going to be message which is the same
variable that we have attached to the
scope object so model here is message
and we have specified that as the value
for ng - model directive now let's
include two HTML break elements let's
save our changes and look at what's
going to happen when we reload this page
look at the value in the text box hello
Angela whatever data that we have in the
model is automatically displayed in the
text box because ng - model directive
value is the same as our model here now
look at what's going to happen as I type
within the text box look at the value
right here it's automatically updated so
here two-way data-binding is in action
so as we type into this text box and
since we have specified ng -
model directive value as message and we
already have that model so the value in
the textbox is automatically updating
that model data and since we have the
binding expression here that's
automatically updating the view as the
model updates the view is updated so
two-way data-binding
in action now let's understand what is
going to happen if I specify a different
value let's say I have ng - model value
as greeting let's save our changes and
let's reload this page and see what's
going to happen first of all notice
within the text box we don't have
anything because you know ng - model
greeting that's a different model than
message okay now what is going to happen
when we type into this text box as far
as the UI is concerned nothing is going
to happen but behind the scenes angela
is going to create that model for us and
it's going to store that data in that
model okay
now you will see a difference if you use
a different data binding expression so
if I specify greeting here and let's
reload this page so to start with with
no text box we don't have anything but
as I type into the text box look at what
is happening you know a model is created
with that name greeting and whatever
value we type in the text box is stored
in that and since we are using a binding
expression here with the same model the
data is automatically updated so two-way
data binding this ng - model directive
can be used with any of these three HTML
elements input select and text area so
here our model is a very simple property
like message can we work with in a
complex object sure we can and let's say
we have a complex object like employee
which has got several properties like
first name last name gender etc you know
the two-way data-binding even works
complex at a objects let's look at a
quick example so what I'm going to do
here is create a variable called
employee which is going to be our
employee object and this is going to
have first name
let's initialize first name to then last
name let's say Hastings and gender male
okay so we have our employee object here
let's attach to the scope object dollar
scope dot employee equals employee so we
have our model ready those are our
initial values and within this webpage
what I'm going to include is a table and
let's include a TR and within that two
TDs
so within the first TD let's include
something like first name and then we
want an input element so input type
equals text and I'm going to include ng
- model and the value for this one is
going to be employee dot first name okay
look at our model o modulus employee
which is nothing but this employee
object and within that object we have
these properties first name last name
gender so ng - model is employee dot
first name okay
and what I'm going to do is actually
make two more copies of the steer so
this is going to be our last name and
here our model will be employee dot last
name and here employee door gender and
let's change the text in this to be
gender and I'm going to make a copy of
this table okay and use an HTML break
and then here you know we'll leave that
first name there and then I'm going to
use a binding expression okay so let's
move that inside that binding expression
and similarly let's remove that include
a binding expression and move this
inside let's do the same thing for
gender
all right so let's save our changes and
reload our webpage
look at that whatever values initially
we had in our model that is our employee
object those are displayed in the
respective text boxes and look at this
as I type into first name textbox you
know that value is updated right here
and similarly you know last name and the
gender so this means we don't have to
write any code whatsoever to move the
form values into our model okay so
that's definitely a great advantage
two-way data-binding and here is that
complex object example that we just
worked with thank you for listening and
have a great day