AngularJS ng init directive Video Lecture | Learn and Understand AngularJS : For Beginners - Front-End Programming

this is part 15 of angularjs tutorial in
this video we'll discuss ng in a
directive and angular the ngne directive
allows you to evaluate an expression in
the current scope let's understand what
we mean by this statement with an
example here we have a very simple HTML
page on this development I'm going to
use ng in a directive I'm going to use
this directive to evaluate this
expression so let's copy this expression
and paste it right here so what is this
expression doing here this is actually
creating an array of employees notice
each employee object has got name gender
and city properties since we are using
this ng and a directive on this
development this employees RA will be
available within that development as
well as to any child elements within
that development so now what we want to
do is present this employee's data using
an HTML table so I'm going to use an
HTML table and this table is going to
contain a tea head section and within
tea head let's include a TR and within
that TR I'm going to include 3 th
elements to display name gender and city
column headers the first one is going to
be named gender and the final one city
and this table element is also going to
have a section for tea body and within
tea body we are going to include a TR
and on this TR element I am going to use
ng - repeat director now we are going to
use this employees RA here
so for each employee M employees array
so we want to loop through each employee
and then within the TD we want to use a
binding expression use the employee
object that we have and then retrieve
the name property and display it let's
do the same thing for gender and finally
City let's save the changes and when we
reload the page look at that we see the
employee's name gender and city as
expected so here we are using ng init to
evaluate this expression which is
to create an employee's array for us so
this is basically initializing the data
that the page needs but in a real-world
application you should use a controller
instead of ng in it to initialize values
on a scope okay that's the job of the
controller so instead of using ng n8 to
provide the data it's the responsibility
of the controller so we should actually
be doing this in the controller so here
I have the script JS file and here we
have the controller function so this is
our controller function to which we are
passing the dollar scope object so I'm
actually going to move this code into
the controller so I'm going to create a
variable here let's call it employees
and we have the employees array and we
have this dollar scope object so to that
I am going to attach a property I'm
going to call it employees equal to the
employee array so now this controller is
providing the data that our view needs
so instead of using ng in it here we
will use ng controller and the name of
our controller is my controller so we
are going to specify that right there
and on the body element we are using ng
app and here we need to specify the name
of our module the name of your module is
my module so let's go ahead and specify
it there and then all this code is
present in script or JS file which we
also need to reference on this HTML page
so let's drag and drop that script or
J's file let's save the changes and then
we reload this page it should work
exactly the same way as before ng in it
should only be used for aliasing special
properties of ng repeat directive let's
understand what we mean by this
statement with an example so to
understand that here I have an array you
know a country's array let's copy that
and paste it within our controller
function here and if you look at this
country Sri notice each country object
has got a name and it also has got
cities property
and if you look at the city's property
it's another array which contains the
list of city names okay so at the moment
we've got two countries and each country
has got two cities with a net okay so
let's attach that to our scope object
and we want to initialize this variable
with our country's array and then what
we want to do is present that data using
nested unordered list elements so I'm
going to remove this table element from
there instead let's use an unordered
list and in the first outer unordered
list I'm going to use an ally and on
this I'm going to use ng-repeat
directive and I'm going to use this
expression right here for each country
in countries so model is countries
that's what we have attached to the
scope right here so we are looping
through each country and what we want to
do is display the name of the country so
I'm going to use the country object dot
name property and then I'm going to
create another unordered list and I'm
going to include another Li here and
then I'm going to loop through each city
you know that every country object has
so I'm going to use another ng-repeat
directive here equals for each city n we
have the country object and it has got
cities property and what do we want to
do with that city we want to display the
name of the city so I'm going to take
that city object and then use the name
property of that let's save the changes
and when we reload this we should see
the name of the countries and the cities
now what we want to do is actually print
the index of the country and the index
of the city that's very easy to do
because ng-repeat provides dollar index
property which we can use to print out
the index of the country and the index
of the cities so I can simply say index
equals we can use this
finding expression and then use dollar
index and we can do the same thing on
the CT as well alright so let's save the
changes and when we reload this because
that within the country array the first
element is in that India so index is
zero us is the second element index is
one similarly for the cities Hyderabad
is the first city so index is zero
Chennai is the second city index is one
the same is the case for the cities
within us but now what we want to do is
within the child element you know the
cities we want to display the parent
index that is the country index as well
as the child index okay so to do that we
somehow have to preserve the parent
index value because when you say dollar
index within this context this is going
to give us the index of the country
element within the country array whereas
when we use dollar index here this is
going to give us the index of the city
element within that sub collection in
the cities property okay but now here
within this child element we want the
index of its parent element okay to get
that what we can do is store the parent
index in a variable using ng in a
directive so what I'm going to do here
is on this Li I'm going to use ng in it
and create a variable I'm going to call
it parent and x equals dollar index so
here I'm using this expression to store
the value of the special property of ng
repeat directive within this variable
parent index now you can use this parent
index within this list item and any
child elements that are present within
that list item so now what I can do is
get rid of that and then use that
variable and then I can simply say
parent in the x equals the variable
parent index and then include a comma
and this is the index of the actual item
okay so let's save our changes and when
we reload this look at that we get the
parent index
the index of the country which is zero
in both the cases and USA index is 1 so
ng and it should only be used for a
liaising special properties of ng repeat
directive such as Dollar Index for
example thank you for listening and have
a great day